原生JS轮播图

这里是css文件

<style>
    * {
        margin: 0;
        padding: 0
    }
    #box {
        width: 960px;
        height: 320px;
        position: relative;
        margin: 0 auto;
        overflow: hidden;
    }
    #pbox {
        height: 320px;
        position: absolute
    }
    #left {
        position: absolute;
        top: 130px;
        left: 10px;
    }
    #right {
        position: absolute;
        top: 130px;
        right: 10px;
    }
    #dbox {
        list-style: none;
        position: absolute;
        bottom: 20px;
        left: 400px;
    }
    #dbox li {
        width: 20px;
        height: 20px;
        border: 1px solid skyblue;
        border-radius: 20px;
        float: left;
        margin-left: 5px;
    }
</style>

这里是html文件

<div id="box">
    <div id="pbox"></div>
    <img id="left" src="left.png" alt="">//图片为左按钮
    <img id="right" src="right.png" alt="">//图片为右按钮
    <ul id="dbox"></ul>
</div>

这里是JS文件

<script>
    var box, pbox, left, right, direct, dbox, dotList
    var imgSrc = ["a.jpeg", "b.jpeg", "c.jpeg", "d.jpeg", "e.jpeg"]  //这里存放你要存放的图片的路径
    var imgList = []
    var num = 0
    var bool = false
    var scoll = false
    var math = 160
    init();
    function init() {
        box = document.getElementById("box");
        pbox = document.getElementById("pbox");
        left = document.getElementById("left");
        right = document.getElementById("right");
        dbox = document.getElementById("dbox");
        left.addEventListener("click", changeImg);
        right.addEventListener("click", changeImg);
        box.addEventListener("mouseenter", auto)
        box.addEventListener("mouseleave", auto)
        createImg()
        animation()
        createDot()
    }
    function createImg() {
        for (var i = 0; i < imgSrc.length; i++) {
            imgList[i] = new Image();
            imgList[i].src = imgSrc[i];
            imgList[i].style.width = "960px";
            imgList[i].style.height = "320px";
        }
        pbox.appendChild(imgList[0])
    }
    function changeImg(e) {
        if (bool) return
        if (this === left) {
            direct = "left";
            num--;
            if (num === -1) {
                num = imgSrc.length - 1
            }
        } else if (this === right) {
            direct = "right";
            num++;
            if (num === imgSrc.length) {
                num = 0
            }
        }
        nextImg()
        changeColor()
    }
    function nextImg() {
        if (bool) return
        pbox.style.width = 960 * 2 + "px"
        if (direct == "left") {
            pbox.insertBefore(imgList[num], pbox.firstElementChild)
            pbox.style.left = -960 + "px"
        } else if (direct == "right") {
            pbox.appendChild(imgList[num])
        }
        bool = true
    }
    function moveImg() {
        if (!bool) return
        if (direct === "left") {
            pbox.style.left = pbox.offsetLeft + 20 + "px";
            if (pbox.offsetLeft === 0) {
                bool = false
                pbox.lastElementChild.remove()
            }
        } else if (direct === "right") {
            pbox.style.left = pbox.offsetLeft - 20 + "px";
            if (pbox.offsetLeft === -960) {
                bool = false
                pbox.firstElementChild.remove()
                pbox.style.left = 0
            }
        }
    }
    function animation() {
        requestAnimationFrame(animation)
        moveImg()
        imgScorll()
    }
    function createDot() {
        for (var i = 0; i < imgSrc.length; i++) {
            var li = document.createElement("li")
            dbox.appendChild(li)
        }
        dbox.firstElementChild.style.background = "skyblue"
        dbox.addEventListener("click", changeDot)
        changeColor()
    }
    function changeDot(e) {
        if (bool) return
        var list = Array.from(dbox.children)
        var index = list.indexOf(e.target)
        if (index === num) {
            return
        }
        if (index > num) {
            direct = "right"
        } else if (index < num) {
            direct = "left"
        }
        num = index
        changeImg()
        changeColor()
    }
    function changeColor() {
        if (dotList) {
            dotList.style.background = ""
        }
        dotList = dbox.children[num]
        dotList.style.background = "skyblue"
    }
    function imgScorll() {
        if (!scoll) return
        math--;
        if (math === 0) {
            math = 160
            direct = "right";
            num++;
            if (num === imgSrc.length) {
                num = 0
            }
            changeImg()
        }
    }
    function auto(e) {
        if (e.type === "mouseenter") {
            scoll = false
        } else if (e.type === "mouseleave") {
            scoll = true
        }
    }
</script>