用计时器的代码给我一份
时间: 2024-03-05 09:50:46 浏览: 14
这里是一个使用 JavaScript 实现网页轮播图片的示例代码:
HTML 代码:
```html
<div class="slider">
<img src="image1.jpg">
<img src="image2.jpg">
<img src="image3.jpg">
</div>
```
CSS 代码:
```css
.slider {
position: relative;
width: 600px;
height: 400px;
overflow: hidden;
}
.slider img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
transition: opacity 1s ease-in-out;
}
.slider img.active {
opacity: 1;
}
```
JavaScript 代码:
```javascript
var slider = document.querySelector('.slider');
var images = slider.querySelectorAll('img');
var index = 0;
setActiveImage();
setInterval(function() {
index = (index + 1) % images.length;
setActiveImage();
}, 4000);
function setActiveImage() {
for (var i = 0; i < images.length; i++) {
images[i].classList.remove('active');
}
images[index].classList.add('active');
}
```
这个示例中,使用 setInterval 函数定时调用 setActiveImage 函数,实现轮播图片的切换。在 setActiveImage 函数中,通过改变轮播图片的 class 属性来控制图片的显示顺序。在 CSS 中,使用 opacity 和 transition 属性实现轮播图片的渐变切换效果。