JavaScript 原生js实现轮播图
demo
设置3s自动轮播时,点击圆点或按钮会出现点击后仍然按原定时器跳转到下一张,有时时间间隔非常短,通过设置定时器时间参数time解决,在圆点和按钮的点击事件中将time置为0,使得在当前页停留3s后再自动开始轮播。
完整代码如下:
HTML
<div class="container">
<div class="slider">
<ul class="pic">
<li class="item active"><img src="./img/A.png"></li>
<li class="item"><img src="./img/B.png"></li>
<li class="item"><img src="./img/C.png"></li>
</ul>
<ul class="pointlist">
<li class="point active" data-index="0"></li>
<li class="point" data-index="1"></li>
<li class="point" data-index="2"></li>
</ul>
<button class="btn prev"><</button>
<button class="btn next">></button>
</div>
</div>
CSS
.container {
width: 600px;
height: 400px;
margin-left: auto;
margin-right: auto;
}
.slider {
width: 100%;
height: 100%;
position: relative;
margin-top: 30px;
}
.slider img {
max-width: 100%;
max-height: 100%;
}
.slider ul.pic {
list-style: none;
width: 100%;
height: 100%;
padding-left: 0;
margin: 0;
}
.slider .item {
position: absolute;
opacity: 0;
transition: all 1s;
}
.slider .btn {
width: 50px;
height: 100px;
position: absolute;
top: 150px;
font-size: 40px;
background: rgba(0,0,0,0.1);
border: 0;
outline: 0;
z-index: 100;
}
.slider .next {
right: 0;
}
.item.active {
z-index: 10;
opacity: 1;
}
.slider ul.pointlist {
list-style: none;
position: absolute;
right: 20px;
bottom: 0;
z-index: 100;
}
.point {
width: 8px;
height: 8px;
background: #999;
border-radius: 100%;
float: left;
margin-left: 10px;
border: 1px solid white;
}
.point.active {
background: white;
}
JavaScript
let items = document.querySelectorAll('.item');//图片
let points = document.querySelectorAll('.point');//圆点
let btnPrev = document.querySelector('.prev');
let btnNext = document.querySelector('.next');
let time = 0;//定时器时间参数
let index = 0;
//清除图片和圆点的active类
function clearActive() {
for (let i = 0; i < items.length; i++) {
items[i].className = 'item';
points[i].className = 'point';
}
}
//跳到索引页
function goIndex() {
clearActive();
items[index].className = 'item active';
points[index].className = 'point active';
}
//跳到下一页
function goNext() {
if (index < items.length - 1) {
index++;
} else {
index = 0;
}
goIndex();
}
//跳到上一页
function goPrev() {
if (index == 0) {
index = items.length - 1;
} else {
index--;
}
goIndex();
}
//绑定next点击事件
btnNext.addEventListener('click', function () {
goNext();
time = 0;
});
//绑定prev点击事件
btnPrev.addEventListener('click', function () {
goPrev();
time = 0;
});
//点击圆点跳转到对应图片
for (let i = 0; i < items.length; i++) {
points[i].addEventListener('click', function () {
let pointIndex = points[i].getAttribute('data-index');
index = pointIndex;
goIndex();
time = 0;
})
}
//自动轮播定时器
setInterval(function () {
time++;
if (time == 30) {
goNext();
time = 0;
}
}, 100);