再写轮播功能-CFANZ编程社区

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>轮播</title>
    <style>
        *{
            margin:0;
            padding: 0;
            list-style: none;
        }
        #bigbox{
            position: relative;
            width: 1000px;
            height: 500px;
            /*background-color: red;*/
            overflow: hidden;
        }
        #bigbox #imgs{
            width: 6000px;
            height: 100%;
            position: absolute;
            left: -1000px;
        }
        #bigbox #imgs li{
            width: 1000px;
            height: 100%;
            float: left;
        }
        #bigbox #imgs li img{
            width: 100%;
            height: 100%;
        }
        #left{
            position: absolute;
            width: 100px;
            height: 100px;
            border-radius: 50%;
            background-color: rgba(0,0,0,0.7);
            left: 0;
            top: 40%;
            color: white;
            line-height: 100px;
            text-align: center;
            font-size: 30px;
            cursor: pointer;
        }
        #right{
            position: absolute;
            width: 100px;
            height: 100px;
            border-radius: 50%;
            background-color: rgba(0,0,0,0.7);
            right: 0;
            top: 40%;
            color: white;
            line-height: 100px;
            text-align: center;
            font-size: 30px;
            cursor: pointer;
        }
        #jump{
            position: absolute;
            bottom: 0;
            left: 40%;
        }
        #jump li{
            float: left;
            width: 30px;
            height: 30px;
            margin-left: 10px;
            background-color: red;
            border-radius: 50%;
            cursor: pointer;
            background-color: rgba(0,0,0,0.7);
        }
        #jump li.action{
            background-color: rgba(255,255,255,1);
        }
    </style>
</head>
<body>
<div id="bigbox">
    <ul id="imgs">
        <li><img src="./image/5ae21929352faae3cf2d95d838575c05383259ed.jpg@293w_166h_1c_90q.webp"></li>
        <li><img src="./image/a_100455497_m_601_480_270.webp"></li>
        <li><img src="./image/v_6092950967047507_l_601_255_340.webp"></li>
        <li><img src="./image/d57a4bc43398a15b6369486af4398030110ca3b8.jpg@309w_413h_1c_90q.webp"></li>
        <li><img src="./image/5ae21929352faae3cf2d95d838575c05383259ed.jpg@293w_166h_1c_90q.webp"></li>
        <li><img src="./image/a_100455497_m_601_480_270.webp"></li>
    </ul>
    <span id="left"><</span>
    <span id="right">></span>
    <ul id="jump">
        <li class="action"></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>
<script>
    var bigbox=document.getElementById('bigbox')
    var imgs=document.getElementById('imgs')
    var left=document.getElementById('left')
    var right=document.getElementById('right')
    var lis=document.getElementById('jump').children
    var step=bigbox.offsetWidth
    var timer=null
    var b=true
    left.addEventListener('click',function (){
        if(b){
            b=false
            clearInterval(timer)
            var end=imgs.offsetLeft-step
            console.log(end);
            console.log(imgs.offsetLeft);
            changeJump(end)
            timer=setInterval(function (){
                var speed=Math.floor((end-imgs.offsetLeft)/20)
                if(imgs.offsetLeft===end){
                    clearInterval(timer)
                    if(end===-5000){
                        imgs.style.left=-1000+'px';
                    }
                    b=true
                    return
                }
                imgs.style.left=imgs.offsetLeft + speed + 'px'
                // console.log(imgs.offsetLeft);
            },10)
        }
    })
    right.addEventListener('click',function (){
        if(b){
            b=false
            clearInterval(timer)
            var end=imgs.offsetLeft+step
            changeJump(end)
            timer=setInterval(function (){
                var speed=Math.ceil((end-imgs.offsetLeft)/20)
                if(imgs.offsetLeft===end){
                    clearInterval(timer)
                    if(end===0){
                        imgs.style.left=-4000+'px';
                    }
                    b=true
                    return
                }
                imgs.style.left=imgs.offsetLeft + speed + 'px'
                // console.log(imgs.offsetLeft);
            },10)
        }
    })
    function changeJump(end){
        var i
        if(end===-5000){
            i=0
        }else if(end===0){
            i=3
        }else{
            i=-(end/1000)-1
        }
        console.log(i)
        for(var j=0;j<lis.length;j++){
            lis[j].removeAttribute('class','action')
        }
        lis[i].className='action'

    }
</script>
</body>
</html>