您可以使用
HTML和
CSS创建一个包含多张
图片的容器，并使用JavaScript添加左右
滑动功能。
以下是一个示例代码：
HTML:
```
html
<div class="slider-container">
<div class="slider-wrapper">
<
img src="image1.jpg" alt="Image 1">
<
img src="image2.jpg" alt="Image 2">
<
img src="image3.jpg" alt="Image 3">
</div>
</div>
```
CSS:
```
css
.slider-container {
overflow-x: scroll;
white-space: nowrap;
}
.slider-wrapper {
display: inline-block;
}
```
JavaScript:
```javascript
var sliderWrapper = document.querySelector('.slider-wrapper');
var images = sliderWrapper.querySelectorAll('
img');
var imageWidth = images[0].clientWidth;
var totalWidth = imageWidth * images.length;
sliderWrapper.style.width = totalWidth + 'px';
var sliderContainer = document.querySelector('.slider-container');
var scrollPosition = 0;
var scrollInterval;
function startScroll() {
scrollInterval = setInterval(function() {
scrollPosition += 5;
if (scrollPosition > totalWidth - sliderContainer.clientWidth) {
scrollPosition = 0;
}
sliderContainer.scrollLeft = scrollPosition;
}, 10);
}
function stopScroll() {
clearInterval(scrollInterval);
}
sliderContainer.addEventListener('mouseover', stopScroll);
sliderContainer.addEventListener('mouseout', startScroll);
startScroll();
```
在这个例子中，我们使用
CSS将滑块容器设置为水平滚动，并将滑块包装器设置为内联块显示。然后，我们使用JavaScript计算每个图像的宽度并设置包装器的总宽度，以便所有图像都适合其中。
我们还定义了两个函数，一个用于启动滚动，一个用于停止滚动。我们将这些函数附加到滑块容器的mouseover和mouseout事件上，以便在
鼠标悬停时停止滚动，并在
鼠标离开时重新启动滚动。
最后，我们使用setInterval函数和scrollLeft属性在每个10毫秒内滚动容器。我们还检查滚动位置是否已到达容器的末尾，并在到达时将其重置为0，以便图像可以无限循环。
这篇博客介绍了一个使用CSS和HTML实现的鼠标滑过图片时切换图片的效果。通过设置`onMouseOver`和`onMouseOut`事件，可以在鼠标悬停时改变图片源，实现图片的动态切换。示例代码包括静态和动态两种写法，展示了如何在实际项目中应用这种效果。
最低0.47元/天 解锁文章
扫一扫
587
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
