js实现轮播功能

先上图，效果大概就是这样子：
实现的功能：
1.鼠标经过第几个正方形，就要展示第几张图片，并且正方形的颜色也发生变化
2.图片自动轮播，（这需要一个定时器）
3.鼠标经过图片，图片停止自动播放（这需要清除定时器）
4.鼠标离开图片，图片继续自动轮播（重新开始定时器）
二话不说就上代码：
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
    
            #outer{
                margin: 50px auto;
                width: 520px;
                height: 333px;
                background-color: pink;
                padding: 10px 0px;
                position: relative;
                overflow: hidden;
            
                
            }
            #imgList{
                /*取出项目符号*/
                list-style: none;
                position: absolute;
                    
                
            }
            #imgList li{
            float: left;
            margin: 0px 10px;
            }
            #navDiv{
                position: absolute;
                /*设置位置*/
                bottom: 15px;
                
            }
            #navDiv a{
                float: left;
                width: 15px;
                height: 15px;
                background: red;
                margin: 0 5px;
                opacity: 0.5;
                /*兼容IE8的透明*/
                filter: alpha(opacity=50);
            }
            #navDiv a:hover{
                background: gray;
            }
        </style>
        <script type="text/javascript" src="../js/tools.js"></script>
        <script type="text/javascript">
            window.onload = function(){
                imgList = document.getElementById("imgList");
                imgarr = document.getElementsByTagName("img");
                imgList.style.width = 520*imgarr.length + "px";
                //设置导航居中
                var navDiv = document.getElementById("navDiv");
                var outer = document.getElementById("outer");
                
                navDiv.style.left = (outer.offsetWidth - navDiv.offsetWidth)/2 + "px";
                //设置默认开始的图片
                var index = 0;
                var allA = document.getElementsByTagName("a");
                allA[index].style.backgroundColor = "gray";
                
                /*
                 * 2、实现的功能是点击超链接实现图片的切换
                 */
                for (var i =0 ;i<allA.length;i++){
                    //因为for循环是一上来就执行了，还没到点击就执行了，执行到了第五个，所以点击后数字都是5
                    //为每个超链接都添加一个num属性
                    allA[i].num = i;
                    
                    //为超链接绑定单击响应函数
                    allA[i].onclick = function(){
                        
                        clearInterval(timer);
                        //点击超链接切换图片，让图片左移即可
                        index = this.num;
                        //修改选中的超链接的颜色,但是这样子的话，没点一个就叠加变成了灰色，我们想要的是哪个点击哪个就是灰色。
                        //imgList.style.left = index*-520 + "px";
                        setA();
                        move(imgList,-520*index,20,'left',function(){autoChange();})
                    }
                }
                //创建一个方法来设置a的样式
                function setA(){
                    
                    if(index>=imgarr.length-1){
                        //设置index为0
                        index=0;
                        //防止向左开始把图片转回去
                        //就是把图片的css改回去跟开始一样即可,实现左右滚动的效果
                        imgList.style.left = 0;
                    }
                    
                    for(var i=0; i<allA.length;i++){
                        //设置为空，就默认之前的颜色，要不然如果设置red，hover就不生效了，因为这个a的样式优先级没有内联样式高。
                        allA[i].style.backgroundColor = "";
                    }
                    allA[index].style.backgroundColor = "gray";
                }
                autoChange();
                //创建一个函数，定时去切换图片
                var timer;
                function autoChange(){
                    timer = setInterval(function(){
                        //使索引自增
                        index ++;
                        index = index % imgarr.length;
                        console.log(index);
                        //index %= allA.length;
                        move(imgList,-520*index,20,'left',function(){setA()})
                        
                    },3000);
                }
            }
        </script>
    </head>
    <body>
        <div id="outer">
            <ul id="imgList">
                <li><img src="../img/1.jpg"/></li>
                <li><img src="../img/2.jpg"/></li>
                <li><img src="../img/3.jpg"/></li>
                <li><img src="../img/4.jpg"/></li>
                <li><img src="../img/5.jpg"/></li>
                <!--添加一个防止最后一个一下子闪退到前面第一个-->
                <li><img src="../img/1.jpg"/></li>
            </ul>
        <!--创建导航链接-->
        <div id="navDiv">
            <a href="javascript:;"></a>
            <a href="javascript:;"></a>
            <a href="javascript:;"></a>
            <a href="javascript:;"></a>
            <a href="javascript:;"></a>
        </div>
            
        </div>
    </body>
</html>