html的js图片自动轮番播放
时间: 2023-08-14 12:02:09 浏览: 48
可以通过 JavaScript 实现图片自动轮番播放,以下是一个简单的示例:
HTML 代码:
```html
<div id="slideshow">
<img src="image1.jpg" alt="Image 1">
<img src="image2.jpg" alt="Image 2">
<img src="image3.jpg" alt="Image 3">
</div>
```
CSS 代码:
```css
#slideshow {
position: relative;
}
#slideshow img {
position: absolute;
top: 0;
left: 0;
opacity: 0;
transition: opacity 1s ease-in-out;
}
#slideshow img.active {
opacity: 1;
}
```
JavaScript 代码:
```js
var slides = document.querySelectorAll("#slideshow img");
var currentSlide = 0;
var slideInterval = setInterval(nextSlide, 2000);
function nextSlide() {
slides[currentSlide].classList.remove("active");
currentSlide = (currentSlide + 1) % slides.length;
slides[currentSlide].classList.add("active");
}
```
以上代码会将图片定位到父元素中央,并设置 `opacity` 属性为 0,然后每隔 2 秒钟调用 `nextSlide` 函数,该函数会将当前图片隐藏并将下一张图片显示出来。通过添加和删除 `active` 类来实现图片的显示和隐藏。