js写轮播图

js写轮播图

1、html部分

<div id="box">
        <ul>
            <li class="show"><img src="img/1.jpg" alt="">li>
            <li><img src="img/2.jpg" alt="">li>
            <li><img src="img/3.jpg" alt="">li>
            <li><img src="img/4.jpg" alt="">li>
            <li><img src="img/5.jpg" alt="">li>
            <li><img src="img/6.jpg" alt="">li>
        ul>
        <img src="img/l.png" alt="" id="lef">
        <img src="img/r.png" alt="" id="rig">
        <ol>
            
li>
            
li>
            
li>
            
li>
            
li>
            
li>
        ol>
    div>

2、js部分

 <script>
        var liList = document.querySelectorAll("#box ul li")
        var olList = document.querySelectorAll("#box ol li")
        var rig = document.getElementById("rig")
        var lef = document.getElementById("lef")

        var index = 0
        function setLi(){
     
            for(var i = 0;i <liList.length;i++){
     
                liList[i].className = ""
                olList[i].className = ""
            }
            liList[index].className = "show"
            olList[index].className = "focus"
        }
        // 向右
        rig.onclick = function(){
     
            if(index !== 5){
     
                index++
            }
            if(index === 5){
     
                index = 0
        }
        setLi()
    }
    //向左
    lef.onclick = function(){
     
            
            if(index !== 0){
     
                index--
            }
            if(index === 0){
     
                index = 5
        }
       setLi()
    }
    //圆点
    for(var i = 0;i < olList.length;i++){
     
        olList[i].onclick = function(){
     
            index = this.getAttribute("data-i")
            setLi()
        }
    }
    //计时
    var autoPlay = setInterval(
        function(){
     
            rig.click()
        },3000)

    //鼠标划上停止播放
    var box = document.querySelector("div")
    box.onmouseenter = function(){
     
        clearInterval(autoPlay)
    } 

    // 鼠标移走继续播放
    box.onmouseleave = function(){
     
        autoPlay = setInterval(
        function(){
     
            rig.click()
        },3000)
    }
    </script>