左右滚动显示5张图片,鼠标指向图片暂停滚动
时间: 2023-09-28 08:12:03 浏览: 74
实现左右滚动显示5张图片,鼠标指向图片暂停滚动的效果可以通过JavaScript和CSS来实现。以下是一个示例代码:
HTML代码:
```html
<div class="slider">
<div class="slider-wrapper">
<img src="image1.jpg" alt="image1">
<img src="image2.jpg" alt="image2">
<img src="image3.jpg" alt="image3">
<img src="image4.jpg" alt="image4">
<img src="image5.jpg" alt="image5">
</div>
</div>
```
CSS代码:
```css
.slider {
width: 500px;
overflow: hidden;
position: relative;
}
.slider-wrapper {
display: flex;
position: absolute;
left: 0;
transition: left 0.3s ease-in-out;
}
.slider-wrapper img {
width: 100px;
height: 100px;
margin-right: 10px;
cursor: pointer;
}
.slider-wrapper img:last-child {
margin-right: 0;
}
```
JavaScript代码:
```javascript
let sliderWrapper = document.querySelector('.slider-wrapper');
let images = document.querySelectorAll('.slider-wrapper img');
let currentIndex = 0;
let intervalId = null;
function startSlider() {
intervalId = setInterval(() => {
if (currentIndex === images.length - 5) {
currentIndex = 0;
} else {
currentIndex++;
}
sliderWrapper.style.left = `-${currentIndex * 110}px`;
}, 2000);
}
startSlider();
sliderWrapper.addEventListener('mouseenter', () => {
clearInterval(intervalId);
});
sliderWrapper.addEventListener('mouseleave', () => {
startSlider();
});
```
解释一下上述代码的实现过程:
首先,通过HTML代码创建了一个包含了5张图片的轮播图容器,使用CSS设置了轮播图容器的样式,包括宽度、溢出隐藏、绝对定位等。然后,在轮播图容器内部,使用CSS创建了一个包含所有图片的容器,使用flex布局让图片水平排列,并设置了图片之间的间距和鼠标指针样式。
接下来,通过JavaScript获取了轮播图容器、所有图片以及当前图片的索引等变量,并定义了一个startSlider函数来启动轮播图。在startSlider函数中,使用setInterval函数来定时切换图片,每次切换后都更新currentIndex变量的值,并根据currentIndex变量来设置sliderWrapper容器的left值,从而实现左右滚动的效果。
最后,通过addEventListener函数来监听轮播图容器的mouseenter和mouseleave事件,当鼠标指向图片时暂停轮播图,鼠标离开时重新启动轮播图。