原生Js_使用setInterval() 方法实现图片轮播功能

　　用javascript图片轮播功能

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>图片轮播</title>
        <style>
            #swaper{
                width: 520px;
                margin: 0 auto;
            }
            #number{
                position: relative;
                top: -30px;                
                right: -320px;                        
            }
            label{
                width: 10px;
                height: 10px;
                background-color: yellow;
                margin: 2px;
                
            }
            .active{
                width: 10px;
                height: 10px;
                border: 1px solid black;
                background-color: red;
            }
        </style>
        <script>
            //此处编写代码，实现图片轮播功能

        </script>
    </head>
    <body>
        <div id="swaper">
            <img src="img/pic01.jpg" width="512px" id="img">
            <div id="number">
                <label id="l1" class="active">&nbsp;1&nbsp;</label>
                <label id="l2">&nbsp;2&nbsp;</label>
                <label id="l3">&nbsp;3&nbsp;</label>
                <label id="l4">&nbsp;4&nbsp;</label>
                <label id="l5">&nbsp;5&nbsp;</label>
                <label id="l6">&nbsp;6&nbsp;</label>
            </div>
        </div>
    </body>
</html>

　　(第4和第5张图片是一样的，最下方有看鼠标点击时控制台输出的信息)

        <script>
            //此处编写代码，实现图片轮播功能
            var n =0;
            var t =0;
            var oDiv = document.getElementById('number');
            var labels = document.getElementsByTagName('label');
            window.onload = function(){
                //加载页面时开始触发图片轮播
                t=setTimeout(GaryShowPic,1000);
                for(var i = 0;i<labels.length;i++){
                    //鼠标放置到下标上时
                    labels[i].onmouseover = function(){
                        //停止计时器
                        clearTimeout(t);
                        var b = this.innerText*1;
                        img.src = 'img/pic0'+b+'.jpg';
                        //制空所有图片的style
                        for(var i=0;i<labels.length;i++){
                        labels[i].className='';    
                        }
                        this.className = 'active'
                    }
                    //鼠标离开时
                    labels[i].onmouseout=function(){
                        //得到计数器文本下标,返回值是string类型
                        n=this.innerText*1;
                        //重新开始计时器
                        t=setTimeout(GaryShowPic,1000);
                    }
                }
                
                function GaryShowPic(){
                    n++;
                    if(n>6){n=1;}
                    //制空所有图片的style
                    for(var i=0;i<labels.length;i++){
                    labels[i].className='';    
                    }
                    labels[n-1].className='active';
                    document.getElementById('img').src='img/pic0'+n+'.jpg';
                    t=setTimeout(GaryShowPic,1000);
                    }
                }
        </script>

Gary.Script