js实现图片滚动横向轮播图
时间: 2024-01-21 12:03:01 浏览: 37
以下是使用JavaScript实现图片横向滚动轮播图的示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<style>
* { margin: 0; padding: 0; }
div { width: 400px; height: 320px; }
#ads { border: 4px solid green; height: 320px; overflow: hidden; position: relative; }
#ads li { list-style: none; height: 320px; }
img { width: 400px; height: 320px; position: absolute; }
</style>
</head>
<body>
<div>
<ul id="ads">
<li><img src="image1.jpg" alt="Image 1"></li>
<li><img src="image2.jpg" alt="Image 2"></li>
<li><img src="image3.jpg" alt="Image 3"></li>
</ul>
</div>
<script>
var ads = document.getElementById("ads");
var images = ads.getElementsByTagName("img");
var currentIndex = 0;
function slideImages() {
for (var i = 0; i < images.length; i++) {
images[i].style.display = "none";
}
currentIndex++;
if (currentIndex >= images.length) {
currentIndex = 0;
}
images[currentIndex].style.display = "block";
setTimeout(slideImages, 2000); // 每隔2秒切换图片
}
slideImages();
</script>
</body>
</html>
```
这段代码使用了JavaScript来实现图片横向滚动的轮播图效果。首先,通过获取`ads`元素和其中的`img`元素,然后定义一个变量`currentIndex`来表示当前显示的图片索引。`slideImages`函数用于切换图片,它会将所有图片隐藏,并将`currentIndex`加1,如果`currentIndex`超过了图片数量,则将其重置为0。然后,将当前图片显示出来,并使用`setTimeout`函数来定时调用`slideImages`函数,以实现自动切换图片的效果。