Automatic picture rotation document.getElementById ( "")

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style type="text/css">
            .box{
                border:1px solid red ;
                width:500px ;
                height:200px ;
                padding:6px ;
                margin:0 auto ;
                position: relative;
            }
            .box ul{
                list-style:none ;
                position:absolute ;
                bottom: 0px;
                left:135px ;
            }
            .box ul li{
                display: inline-block;
                border: 1px solid chocolate;
                padding:2px 6px ;
                color:#fff ;
                cursor:pointer ;
            }
            .box ul li.active{
                background:chocolate ;
                color:black ;
            }
        </style>
    </head>
    <body>
        <div class="box" id="box">
            <img src="img/1.jpg" />
            <ul>
                <li class="active" data-num="1">1</li>
                <li data-num="2">2</li>
                <li data-num="3">3</li>
                <li data-num="4">4</li>
                <li data-num="5">5</li>
            </ul>
        </div>
    </body>
    <script type="text/javascript">
        var box=document.getElementById("box");
        var img=box.children[0];
        var ul = box.children[1];
        var ullist=ul.children;
        var imgs=["img/1.jpg","img/2.jpg","img/3.jpg","img/4.jpg","img/5.jpg"];
        var i=1;
        function change_img(){
            
            for (var k=0;k<ullist.length;k++) {
                ullist[k].className=""
            }
            ullist[i].className="active";
            
            img.src=imgs[i];
            i++;
            if (i>=imgs.length) {
                i= 0 ; 
            } 
        } 
        var Time = the setInterval ( " change_img () " , 1000 ); 
        box.onmouseover = function () { 
            the clearInterval (Time); 
        } 
        box.onmouseout = function () { 
            Time = the setInterval ( " change_img () " , 1000 ); 
        } 
        
        // for all li Add event tags 
        for ( var K = 0 ; K <ullist.length;k++) {
                ullist[k].onclick=click_li;
            }
        function click_li(){
            i=this.dataset.num-1;
            change_img();
        }
    </script>
</html>
run:
Automatic picture rotation document.getElementById ( "")

Guess you like
