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);