用JS写一个是无缝轮播图
时间: 2023-04-06 14:05:10 浏览: 75
好的,以下是用JS实现无缝轮播图的代码:
HTML部分:
```
<div class="slider">
<ul class="slides">
<li><img src="image1.jpg"></li>
<li><img src="image2.jpg"></li>
<li><img src="image3.jpg"></li>
<li><img src="image4.jpg"></li>
</ul>
</div>
```
CSS部分:
```
.slider {
width: 100%;
overflow: hidden;
}
.slides {
display: flex;
width: 400%;
animation: slide 10s infinite;
}
.slides li {
width: 25%;
}
@keyframes slide {
0% {
transform: translateX(0);
}
20% {
transform: translateX(0);
}
25% {
transform: translateX(-25%);
}
45% {
transform: translateX(-25%);
}
50% {
transform: translateX(-50%);
}
70% {
transform: translateX(-50%);
}
75% {
transform: translateX(-75%);
}
95% {
transform: translateX(-75%);
}
100% {
transform: translateX(0);
}
}
```
JS部分:
```
const slides = document.querySelectorAll('.slides li');
const slideWidth = slides[0].clientWidth;
let currentSlide = 0;
setInterval(() => {
currentSlide++;
if (currentSlide >= slides.length) {
currentSlide = 0;
}
slides.forEach(slide => {
slide.style.transform = `translateX(-${currentSlide * slideWidth}px)`;
});
}, 5000);
```
以上代码实现了一个简单的无缝轮播图,每5秒钟自动切换到下一张图片。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)