js轮播图示例代码
以下是一个简单的 JavaScript 轮播图示例代码：
HTML：
<div class="slideshow-container"><div class="slide fade"><img src="img1.jpg"></div><div class="slide fade"><img src="img2.jpg"></div><div class="slide fade"><img src="img3.jpg"></div>
</div><button class="prev" onclick="plusSlides(-1)">❮</button>
<button class="next" onclick="plusSlides(1)">❯</button>
CSS：
.slideshow-container {position: relative;height: 400px;
}
.slideshow-container img {width: 100%;height: 400px;
}
.slide {position: absolute;width: 100%;height: 400px;display: none;
}
.prev, .next {position: absolute;top: 50%;transform: translateY(-50%);z-index: 1;padding: 10px;font-size: 30px;font-weight: bold;color: #fff;background-color: rgba(0,0,0,0.5);border: none;cursor: pointer;
}
.prev {left: 0;
}
.next {right: 0;
}
JavaScript：
var slideIndex = 1;
showSlides(slideIndex);function plusSlides(n) {showSlides(slideIndex += n);
}function showSlides(n) {var i;var slides = document.getElementsByClassName("slide");if (n > slides.length) {slideIndex = 1}if (n < 1) {slideIndex = slides.length}for (i = 0; i < slides.length; i++) {slides[i].style.display = "none";}slides[slideIndex-1].style.display = "block";
}
这个轮播图包含三个图片，分别是 img1.jpg、img2.jpg、img3.jpg。CSS 中定义了轮播图容器 .slideshow-container 和图片样式，以及轮播图的按钮样式。JavaScript 中定义了轮播图的逻辑，包括 plusSlides() 和 showSlides() 两个函数，以及初始化轮播图的 showSlides(slideIndex) 函数。最后在 HTML 中定义了轮播图的容器和按钮。