图片自动轮播 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 = setInterval("change_img()",1000);
        box.onmouseover=function(){
            clearInterval(time);
        }
        box.onmouseout=function(){
            time=setInterval("change_img()",1000);
        }
        
        //为所有li标签添加事件
        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>
运行：
图片自动轮播 document.getElementById(" ")

猜你喜欢
