JavaScript轮播图代码
时间: 2023-07-09 20:13:44 浏览: 113
js轮播图代码
以下是一个简单的JavaScript轮播图代码示例:
HTML代码:
```
<div class="slideshow-container">
<div class="slideshow-slide">
<img src="image1.jpg">
</div>
<div class="slideshow-slide">
<img src="image2.jpg">
</div>
<div class="slideshow-slide">
<img src="image3.jpg">
</div>
</div>
```
CSS代码:
```
.slideshow-container {
position: relative;
width: 100%;
}
.slideshow-slide {
display: none;
}
.slideshow-slide:first-child {
display: block;
}
```
JavaScript代码:
```
var slideIndex = 0;
showSlides();
function showSlides() {
var slides = document.getElementsByClassName("slideshow-slide");
for (var i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if (slideIndex > slides.length) {
slideIndex = 1;
}
slides[slideIndex - 1].style.display = "block";
setTimeout(showSlides, 3000); // 切换时间间隔为 3 秒
}
```
JavaScript代码中的 `showSlides()` 函数会循环所有的轮播图并将它们的 `display` 属性设置为 `none`,然后将 `slideIndex` 加 1。如果 `slideIndex` 大于轮播图数量,则将其重置为 1。最后,将 `slides[slideIndex - 1]` 的 `display` 属性设置为 `block`,以显示下一个轮播图。`setTimeout()` 函数用于在指定的时间后再次调用 `showSlides()` 函数,以切换到下一个轮播图。
阅读全文