这是最简单的轮播图，图片自己加

2023-12-22 10:42:46

代码：

<!DOCTYPE html>
<html>

<head>
? <title>轮播图</title>
? <style>
? ? * {
? ? ? margin: 0;
? ? ? padding: 0;
? ? ? box-sizing: border-box;
? ? }

? ? .container {
? ? ? position: relative;
? ? ? overflow: hidden;
? ? ? width: 600px;
? ? ? height: 400px;
? ? ? margin: 50px auto;
? ? }

? ? .slider {
? ? ? position: absolute;
? ? ? top: 0;
? ? ? left: 0;
? ? ? width: 300%;
? ? ? height: 100%;
? ? ? display: flex;
? ? ? transition: transform 0.6s ease-in-out; /* 修改这一行 */
? ? }

? ? .slide {
? ? ? flex: 1;
? ? ? height: 100%;
? ? ? display: flex;
? ? ? align-items: center;
? ? ? justify-content: center;
? ? ? font-size: 48px;
? ? ? color: #fff;
? ? }

? ? .slide1 {
? ? ? background-color: #f44336;
? ? }

? ? .slide2 {
? ? ? background-color: #2196f3;
? ? }

? ? .slide3 {
? ? ? background-color: #4caf50;
? ? }

? ? .prev,
? ? .next {
? ? ? position: absolute;
? ? ? top: 50%;
? ? ? transform: translateY(-50%);
? ? ? width: 50px;
? ? ? height: 50px;
? ? ? background-color: rgba(0, 0, 0, 0.5);
? ? ? color: #fff;
? ? ? font-size: 24px;
? ? ? text-align: center;
? ? ? line-height: 50px;
? ? ? cursor: pointer;
? ? }

? ? .prev:hover,
? ? .next:hover {
? ? ? background-color: rgba(0, 0, 0, 0.8);
? ? }

? ? .prev {
? ? ? left: 0;
? ? }

? ? .next {
? ? ? right: 0;
? ? }

? ? .dots {
? ? ? position: absolute;
? ? ? bottom: 20px;
? ? ? left: 50%;
? ? ? transform: translateX(-50%);
? ? ? display: flex;
? ? }

? ? .dot {
? ? ? width: 10px;
? ? ? height: 10px;
? ? ? background-color: rgba(255, 255, 255, 0.5);
? ? ? margin: 0 5px;
? ? ? border-radius: 50%;
? ? ? cursor: pointer;
? ? }

? ? .dot.active {
? ? ? background-color: #fff;
? ? }
? </style>
</head>

<body>
? <div class="container">
? ? <div class="slider">
? ? ? <div class="slide slide1">
? ? ? ? <!-- <div style="display: flex;">
? ? ? ? ? <img src="./img/honor/1.jpg" style="width: 200px;height: 200px;">
? ? ? ? ? <img src="./img/honor/2.png" style="width: 200px;height: 200px;">
? ? ? ? </div> -->
? ? ? </div>
? ? ? <div class="slide slide2">
? ? ? ? <!-- <div style="display: flex;">
? ? ? ? ? <img src="./img/honor/3.png" style="width: 200px;height: 200px;">
? ? ? ? ? <img src="./img/honor/4.png" style="width: 200px;height: 200px;">
? ? ? ? </div> -->
? ? ? </div>
? ? ? <div class="slide slide3">
? ? ? ? <!-- <div style="display: flex;">
? ? ? ? ? <img src="./img/honor/3.png" style="width: 200px;height: 200px;">
? ? ? ? ? <img src="./img/honor/4.png" style="width: 200px;height: 200px;">
? ? ? ? </div> -->
? ? ? </div>

? ? </div>
? ? <div class="prev">&#10094;</div>
? ? <div class="next">&#10095;</div>
? ? <div class="dots">
? ? ? <div class="dot active"></div>
? ? ? <div class="dot"></div>
? ? ? <div class="dot"></div>
? ? </div>
? </div>
? <script>
? ? let slideIndex = 1;
? ? showSlides(slideIndex);

? ? function plusSlides(n) {
? ? ? showSlides(slideIndex += n);
? ? }

? ? function currentSlide(n) {
? ? ? showSlides(slideIndex = n);
? ? }

? ? function showSlides(n) {
? ? ? let i;
? ? ? let slides = document.getElementsByClassName("slide");
? ? ? let dots = document.getElementsByClassName("dot");
? ? ? if (n > slides.length) { slideIndex = 1 }
? ? ? if (n < 1) { slideIndex = slides.length }
? ? ? for (i = 0; i < slides.length; i++) {
? ? ? ? slides[i].style.transform = "translateX(" + ((i - slideIndex + 1) * 100) + "%)";
? ? ? }
? ? ? for (i = 0; i < dots.length; i++) {
? ? ? ? dots[i].className = dots[i].className.replace(" active", "");
? ? ? }
? ? ? dots[slideIndex - 1].className += " active";
? ? }

? ? let timer = setInterval(function () { plusSlides(1) }, 3000);

? ? let container = document.querySelector(".container");
? ? container.addEventListener("mouseover", function () {
? ? ? clearInterval(timer);
? ? });

? ? container.addEventListener("mouseout", function () {
? ? ? timer = setInterval(function () { plusSlides(1) }, 3000);
? ? });

? ? let prev = document.querySelector(".prev");
? ? prev.addEventListener("click", function () {
? ? ? plusSlides(-1);
? ? });

? ? let next = document.querySelector(".next");
? ? next.addEventListener("click", function () {
? ? ? plusSlides(1);
? ? });

? ? let dots = document.querySelectorAll(".dot");
? ? for (let i = 0; i < dots.length; i++) {
? ? ? dots[i].addEventListener("click", function () {
? ? ? ? currentSlide(i + 1);
? ? ? });
? ? }
? </script>
</body>

</html>

效果图：

文章来源:https://blog.csdn.net/m0_64180190/article/details/135145401
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。