【JavaScript】轮播图（有点乱）

css部分

        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        #app {
            width: 600px;
            height: 400px;
            position: relative;
            left: 30%;
            top: 150px;
            overflow: hidden;
        }

        #app ul {
            width: 2400px;
            height: 400px;
            position: absolute;
        }

        #app ul li {
            float: left;
            width: 600px;
            height: 400px;
        }

        #app img {
            width: 600px;
            height: 400px;
        }

        #leftbtn {
            width: 50px;
            height: 50px;
            position: absolute;
            left: 0;
            top: 40%;
            opacity: 0.4;
        }

        #leftbtn:hover {
            background: #ccc;
        }

        #rightbtn {
            width: 50px;
            height: 50px;
            position: absolute;
            top: 40%;
            right: 0;
            opacity: 0.4;
        }

        #rightbtn:hover {
            background: #ccc;
        }

        #app_2 {
            width: 100%;
            height: 20px;
            position: absolute;
            bottom: 10px;
            text-align: center;
        }

        #app_2 span {
            width: 20px;
            height: 20px;
            background: pink;
            display: inline-block;
            border-radius: 50%;
            margin-right: 5px;
        }

body部分

    <div id="app">
        <ul id="ul">
            <li> <img src="/1.png" alt=""></li>
            <li> <img src="/2.png" alt=""></li>
            <li> <img src="/3.png" alt=""></li>
            <li> <img src="/4.png" alt=""></li>
        </ul>
        <span id="rightbtn" class="iconfont icon-xiangyou1" title="下一张"></span>
        <span id="leftbtn" class="iconfont icon-xiangzuo" title="上一张"></span>
        <div id="app_2">
        </div>
    </div>

JavaScript部分

    let li = document.getElementById('ul').getElementsByTagName('img').length
    let time = 0
    let suanshu = 0
    let ul = document.getElementById('ul')
    let timerone = setInterval(function () {
        time = time - 600
        ul.style.left = `${time}px`
        console.log(ul.style.left);
        if (time <= ((-600 * li) + 1)) {
            time = 0
            ul.style.left = `0px`
        }
    }, 3000);
    let app_2 = document.getElementById('app_2')
    //点击按钮切换轮播
    let leftbtn = document.getElementById('leftbtn')
    let rightbtn = document.getElementById('rightbtn')
    for (let i = 0; i < 2; i++) {
        leftbtn.onclick = function () {
            console.log('左');

            if (time <= -600) {
                // console.log(time + (600) + "px"); //第二张图是600
                time = time + 600
                ul.style.left = `${time}px`
                // time = time + (600) + "px"
                clearInterval(timerone)

            }

        }
        rightbtn.onclick = function () {
            console.log('右');

            if (time >= -1200) {
                time = time + -600
                ul.style.left = `${time}px`
                clearInterval(timerone)
            }
        }
    }
    //小圆点
    for (let j = 0; j < li; j++) {
        let span = document.createElement('span')
        span.setAttribute('name', (-600 * j))
        app_2.append(span)
        span.onclick = function () {

            // data.push(span.getAttribute('name'))
            // console.log(data);
            // console.log(data);

            // console.log(this.getAttribute('name'));
            // console.log(span.getAttribute('name'));
            suanshu = 0 + (-600 * j)
            ul.style.left = `${suanshu}px`
            clearInterval(timerone)
        }
    }