js手写轮播图

逻辑：

在warp中放入5张图片，并排排列，每次向右移动一个图片的距离

body：

<div class="container">
        <div class="wrap" style="left: 0;">
            <img id="img1" src="" alt="">
            <img id="img2" src="" alt="">
            <img id="img3" src="" alt="">
            <img id="img4" src="" alt="">
            <img id="img5" src="" alt="">
        </div>
        <div class="buttons">
            <span class="on">1</span>
            <span>2</span>
            <span>3</span>
            <span>4</span>
            <span>5</span>
        </div>
        <a class="arrow arrow_left"><</a>
        <a class="arrow arrow_right">></a>
</div>

style：

    .container {
        position: relative;
        width: 600px;
        height: 400px;
        margin: 0 auto;
        overflow: hidden;
    }

    .container .wrap {
        position: absolute;
        width: 3000px;
        height: 400px;
        z-index: 1;
        transition: all 1s;
    }

    .container .wrap img {
        float: left;
        width: 600px;
        height: 400px;
    }

    .container .buttons {
        position: absolute;
        bottom: 20px;
        left: 225px;
        width: 150px;
        height: 10px;
        z-index: 2;
    }

    .container .buttons span {
        margin-left: 5px;
        display: inline-block;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background-color: green;
        text-align: center;
        color: white;
        cursor: pointer;
    }

    .container .buttons span.on {
        background-color: rgb(224, 48, 107);
    }

    .container .arrow {
        position: absolute;
        top: 35%;
        color: green;
        padding: 0px 14px;
        border-radius: 50%;
        font-size: 50px;
        z-index: 2;
        display: none;
    }

    .container .arrow_left {
        left: 10px;
    }

    .container .arrow_right {
        right: 10px;
    }

    .container:hover .arrow {
        display: block;
    }

    .container .arrow:hover {
        background-color: rgba(0, 0, 0, 0.2);
    }

    #img1 {
        background: red;
    }

    #img2 {
        background: gray;
    }

    #img3 {
        background: black;
    }

    #img4 {
        background: white;
    }

    #img5 {
        background: yellow;
    }

script：

    var wrap = document.querySelector(".wrap");
    var next = document.querySelector(".arrow_right");
    var prev = document.querySelector(".arrow_left");
    next.onclick = function () {
        next_pic();
    }
    prev.onclick = function () {
        prev_pic();
    }

    var index = 0;

    //下一张banner
    function next_pic() {
        index++;
        var newLeft;
        if (wrap.style.left == "-2400px") {
            newLeft = 0;
            index = 0;
        } else {
            newLeft = parseInt(wrap.style.left) - 600;
        }
        wrap.style.left = newLeft + "px";
        showCurrentDot();
    }

    //上一张banner
    function prev_pic() {
        index--;
        var newLeft;
        if (wrap.style.left === "0px") {
            newLeft = -2400;
            index = 4;
        } else {
            newLeft = parseInt(wrap.style.left) + 600;
        }
        wrap.style.left = newLeft + "px";
        showCurrentDot();
    }

    var dots = document.getElementsByTagName("span");

    //下面5个小点的变色
    function showCurrentDot() {
        for (var i = 0; i < dots.length; i++) {
            dots[i].className = "";
        }
        dots[index].className = "on";
    }

    //下面5个小点的点击事件
    for (var i = 0; i < dots.length; i++) {
        clickdots(i);
    }
    function clickdots(i) {
        dots[i].onclick = function () {
            var dis = index - i;
            wrap.style.left = (parseInt(wrap.style.left) + dis * 600) + "px";
            index = i;
            showCurrentDot();
        }
    }

    //自动播放
    function autoplay() {
        timer = setInterval(next_pic, 4000);
    }
    autoplay();