实现同时显示4张图片的轮播图代码
时间: 2024-03-05 15:47:32 浏览: 29
好的,下面是一个简单的完整代码示例,实现同时显示4张图片的轮播图:
HTML:
```
<div class="slider">
<img src="image1.jpg">
<img src="image2.jpg">
<img src="image3.jpg">
<img src="image4.jpg">
</div>
```
CSS:
```
.slider {
width: 800px; /* 4张图片宽度之和 */
overflow: hidden;
}
.slider img {
width: 200px; /* 单张图片宽度 */
float: left;
}
```
JavaScript:
```
// 获取轮播图容器和图片元素
var slider = document.querySelector('.slider');
var sliderImgs = document.querySelectorAll('.slider img');
// 定义图片索引和轮播定时器
var index = 0; // 当前图片索引
var timer = null; // 轮播定时器
// 定义自动轮播函数
function autoSlide() {
// 隐藏当前图片
sliderImgs[index].style.display = 'none';
// 切换到下一张图片
index = (index + 1) % sliderImgs.length;
// 显示下一张图片
sliderImgs[index].style.display = 'block';
}
// 启动自动轮播
timer = setInterval(autoSlide, 3000);
// 鼠标移入停止自动轮播,移出恢复自动轮播
slider.addEventListener('mouseover', function() {
clearInterval(timer);
});
slider.addEventListener('mouseout', function() {
timer = setInterval(autoSlide, 3000);
});
```
这个示例中,通过JavaScript实现了自动轮播和鼠标悬停停止轮播的功能。你可以根据实际需求对代码进行修改和完善。