js 六张图片写一个左右滑动轮播图
时间: 2023-07-14 21:13:05 浏览: 59
可以使用以下步骤实现左右滑动轮播图:
1. 在 HTML 文件中创建一个容器 div 并添加六张图片。
```html
<div class="slider">
<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">
<img src="image6.jpg" alt="image6">
</div>
```
2. 使用 CSS 将容器布局为水平方向,并且设置图片的宽度和高度。
```css
.slider {
display: flex;
flex-direction: row;
overflow-x: scroll;
}
.slider img {
width: 100%;
height: 100%;
}
```
3. 使用 JavaScript 监听滚动事件,当滚动到图片的 1/3 时,自动滑动到下一张图片。
```js
const slider = document.querySelector(".slider");
let isDown = false;
let startX;
let scrollLeft;
slider.addEventListener("mousedown", (e) => {
isDown = true;
startX = e.pageX - slider.offsetLeft;
scrollLeft = slider.scrollLeft;
});
slider.addEventListener("mouseleave", () => {
isDown = false;
});
slider.addEventListener("mouseup", () => {
isDown = false;
});
slider.addEventListener("mousemove", (e) => {
if (!isDown) return;
e.preventDefault();
const x = e.pageX - slider.offsetLeft;
const walk = (x - startX) * 3;
slider.scrollLeft = scrollLeft - walk;
});
slider.addEventListener("scroll", () => {
const { scrollLeft, clientWidth, scrollWidth } = slider;
if (scrollLeft < scrollWidth / 3) return;
slider.scrollTo({
top: 0,
left: scrollLeft + clientWidth,
behavior: "smooth",
});
});
```
这样就可以实现一个简单的左右滑动轮播图了。