js怎么实现一张图片循环滚动 代码
时间: 2024-05-03 21:20:52 浏览: 146
很简单,可以使用CSS3动画或者JavaScript实现。以下是使用JavaScript的代码示例:
HTML代码:
```
<div class="image-slider">
<img src="image1.jpg">
<img src="image2.jpg">
<img src="image3.jpg">
</div>
```
CSS代码:
```
.image-slider {
width: 500px;
height: 300px;
overflow: hidden;
}
.image-slider img {
width: 100%;
height: 100%;
}
```
JavaScript代码:
```
var slider = document.querySelector('.image-slider');
var images = slider.querySelectorAll('img');
var current = 0;
function nextSlide() {
images[current].classList.remove('active');
current = (current + 1) % images.length;
images[current].classList.add('active');
}
setInterval(nextSlide, 3000);
```
这段代码会每隔3秒钟切换一张图片,并且图片会循环滚动。
阅读全文