js实现轮播图完整代码
时间: 2023-12-18 10:56:46 浏览: 40
以下是使用原生JavaScript实现轮播图的完整代码:
HTML:
```html
<div class="slider">
<div class="slider-container">
<div class="slider-item">
<img src="image1.jpg">
</div>
<div class="slider-item">
<img src="image2.jpg">
</div>
<div class="slider-item">
<img src="image3.jpg">
</div>
</div>
<div class="slider-prev">prev</div>
<div class="slider-next">next</div>
<div class="slider-dots">
<span class="dot active"></span>
<span class="dot"></span>
<span class="dot"></span>
</div>
</div>
```
CSS:
```css
.slider {
position: relative;
width: 100%;
height: 400px;
overflow: hidden;
}
.slider-container {
position: absolute;
width: 300%;
height: 100%;
left: -100%;
display: flex;
transition: left 0.5s ease-in-out;
}
.slider-item {
width: 33.333%;
height: 100%;
}
.slider-item img {
width: 100%;
height: 100%;
object-fit: cover;
}
.slider-prev, .slider-next {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 50px;
height: 50px;
border-radius: 50%;
background-color: rgba(0, 0, 0, 0.5);
color: #fff;
font-size: 24px;
text-align: center;
cursor: pointer;
transition: background-color 0.3s ease-in-out;
}
.slider-prev:hover, .slider-next:hover {
background-color: rgba(0, 0, 0, 0.8);
}
.slider-prev {
left: 20px;
}
.slider-next {
right: 20px;
}
.slider-dots {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
display: flex;
}
.slider-dots .dot {
width: 12px;
height: 12px;
margin: 0 8px;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.5);
cursor: pointer;
transition: background-color 0.3s ease-in-out;
}
.slider-dots .dot.active {
background-color: #fff;
}
.slider-dots .dot:hover {
background-color: rgba(255, 255, 255, 0.8);
}
```
JavaScript:
```javascript
const slider = document.querySelector('.slider');
const sliderContainer = document.querySelector('.slider-container');
const sliderItems = document.querySelectorAll('.slider-item');
const prevBtn = document.querySelector('.slider-prev');
const nextBtn = document.querySelector('.slider-next');
const dots = document.querySelectorAll('.dot');
// 当前显示的图片索引
let currentIndex = 0;
// 偏移量,用于控制 slider-container 的 left 值
let offset = 0;
// 自动轮播定时器
let timer = null;
// 自动轮播
function autoPlay() {
timer = setInterval(() => {
next();
}, 3000);
}
// 显示指定索引的图片
function show(index) {
if (index < 0) {
index = sliderItems.length - 1;
} else if (index >= sliderItems.length) {
index = 0;
}
currentIndex = index;
offset = -currentIndex * slider.offsetWidth;
sliderContainer.style.left = offset + 'px';
// 更新 dots 的激活状态
dots.forEach(dot => dot.classList.remove('active'));
dots[currentIndex].classList.add('active');
}
// 下一张图片
function next() {
show(currentIndex + 1);
}
// 上一张图片
function prev() {
show(currentIndex - 1);
}
// 点击 dots 切换图片
dots.forEach((dot, index) => {
dot.addEventListener('click', () => {
show(index);
});
});
// 点击 prev 和 next 切换图片
prevBtn.addEventListener('click', prev);
nextBtn.addEventListener('click', next);
// 鼠标悬停停止自动轮播,离开恢复自动轮播
slider.addEventListener('mouseenter', () => {
clearInterval(timer);
});
slider.addEventListener('mouseleave', () => {
autoPlay();
});
// 初始化轮播图,显示第一张图片,开始自动轮播
show(0);
autoPlay();
```
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.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)