js实现轮播功能

先上图，效果大概就是这样子：
js实现轮播功能-LMLPHP
实现的功能：
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>