前端网页实现轮播图功能的代码
时间: 2023-04-01 22:00:55 浏览: 89
你好,以下是前端网页实现轮播图功能的代码:
HTML 代码:
```
<div class="slider">
<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 :
```
.slider {
width: 100%;
height: 400px;
overflow: hidden;
}
.slider-wrapper {
width: 300%;
height: 100%;
display: flex;
transition: transform .5s ease;
}
.slider-wrapper img {
width: 33.333%;
height: 100%;
object-fit: cover;
}
.slider-wrapper img:nth-child(1) {
transform: translateX(%);
}
.slider-wrapper img:nth-child(2) {
transform: translateX(-33.333%);
}
.slider-wrapper img:nth-child(3) {
transform: translateX(-66.666%);
}
```
JavaScript 代码:
```
let slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
let i;
const slides = document.getElementsByClassName("slider-wrapper")[].getElementsByTagName("img");
const dots = document.getElementsByClassName("dots")[].getElementsByTagName("span");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = ; i < slides.length; i++) {
slides[i].style.transform = "translateX(-" + (slideIndex-1) * 33.333 + "%)";
}
for (i = ; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
dots[slideIndex-1].className += " active";
}
```
希望能对你有所帮助。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.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_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)