原生js 实现轮播图

原理介绍

1. html

 <div id="swiper-container" class="swiper-container" onmouseenter="swiperImg()" onmouseleave="stopSwiper()">
        <div id="img-list" style="left:0px;">
            <img src="img/swiper1.png" alt="1">
            <img src="img/swiper2.png" alt="2">
            <img src="img/swiper1.png" alt="1">
            <img src="img/swiper2.png" alt="2">
        </div>
        <div id="swiper-btn">
            <span index="1" class="on"></span>
            <span index="2"></span>
        </div>
    </div>

布局很简单，利用一个class="swiper-container"的div，包裹图片列表，swiper-btn是按钮
2. css

 * {
        margin: 0;
        padding: 0;
    }

    a {
        text-decoration: none;
    }

    .swiper-container {
        position: relative;
        width: 300px;
        height: 300px;
        margin: 0 auto;
        border: 1px solid;
        overflow: hidden;
    }

    #img-list {
        position: absolute;
        width: 1200px;
        height: 300px;
    }

    #img-list img {
        float: left;
    }

    #swiper-btn {
        position: absolute;
        bottom: 5%;
        left: 45%;
    }

    #swiper-btn span {
        display: inline-block;
        width: 10px;
        height: 10px;
        border-radius: 5px;

    }

    .on {
        background-color: goldenrod;
    }

    span {
        background-color: #d7d7d7;
    }

3. js

var timer;
        var div = document.getElementById('img-list');
        var span = document.getElementById('swiper-btn').getElementsByTagName('span');
        var offset = -300;
        var index = 1;
        function swiperImg() {
            timer = setInterval(() => {
                var left = parseInt(div.style.left);
                var newLeft = left + offset;
                if (newLeft <= -1200) {
                    div.style.left = '0px';
                }
                else {
                    div.style.left = newLeft + 'px';
                }
                showBtn(parseInt(div.style.left));
            }, 3000);
        }

        function showBtn(left) {
            if (left == 0 || left == -600) {
                span[0].className = "on";
                span[1].className = "";
            }
            else {
                span[0].className = "";
                span[1].className = "on";
            }
        }

        function stopSwiper() {
            clearInterval(timer);
        }

        for (var i = 0; i < span.length; i++) {
            span[i].onclick = function () {
                if (this.className == "on") {
                    return false;
                }
                var myIndex = parseInt(this.getAttribute("index"));
                if (myIndex == 1)
                    div.style.left = 0 + 'px';
                if (myIndex == 2)
                    div.style.left = -300 + 'px';
                index = myIndex;
                showButton();
            }
        }

        function showButton() {
            for (var i = 0; i < span.length; i++) {  //全部取消掉on样式
                if (span[i].className == "on") {
                    span[i].className = "";
                    break;
                }
            }
            span[index - 1].className = "on";
        }

效果如下所示：