html用js实现图片轮播
时间: 2023-12-24 14:04:58 浏览: 35
好的,下面是一个简单的示例,实现图片轮播的效果:
HTML部分
```html
<div id="slider">
<img src="image1.jpg" alt="Image 1">
<img src="image2.jpg" alt="Image 2">
<img src="image3.jpg" alt="Image 3">
</div>
```
JavaScript部分
```javascript
var slider = document.getElementById("slider");
var images = slider.getElementsByTagName("img");
var index = 0; // 当前显示图片的下标
var timer = setInterval(function() {
// 隐藏当前图片
images[index].style.display = "none";
// 下一张图片的下标
index = (index + 1) % images.length;
// 显示下一张图片
images[index].style.display = "block";
}, 3000); // 每隔3秒切换一张图片
```
这段代码会将id为"slider"的div中的所有img元素轮流显示出来,每隔3秒自动切换到下一张图片。你可以根据需要修改图片切换的时间间隔、初始显示的图片等。