js实现图片轮播效果

html部分：

div（总容器）包含两个列表（图片列表&数字列表）

css部分：

1.全局：去掉所有列表前的样式（ul去点，ol去数字）
2.整个div容器：设置长宽（和图片大小一样），设置超过部分影藏。
3.设置数字部分的样式。
4.设置数字切换时用的样式

js部分：

1.获取总容器
2.获取两个列表中的li标签保存到变量
3.定义下标和定时器初始值
4.自动播放函数
5.切换图片函数
6.(1)设置自动播放定时器(2)设置鼠标指针移到容器（除了容器中的数字）时停止播放，移出时继续播放
7.遍历所有数字实现鼠标移入时切换对应图片

<div class="all" id='all'>
        <ul id="pic">
            <li><img src="img.jpg" ></li>
            <li><img src="img.jpg"  ></li>
            <li><img src="img.jpg" ></li>
            <li><img src="img.jpg"  ></li>
        </ul>
        <ol id="list">
            <li class="on">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ol>
    </div>

*{margin:0;padding:0;list-style:none;}
    .all{
        height:454px;
        width:730px;
        overflow: hidden;
        position: relative;
    }
    .all ul li{height:454px;}
    .all ol{
        position:absolute;
        right:320px;
        bottom:10px;
    }
    .all ol li{
        font-family: "微软雅黑";
        height:22px;
        width: 22px;
        border-radius: 11px;
        background:#ccc;
        border:solid 1px #666;
        margin-left:5px;
        color:#000;
        float:left;
        line-height:center;
        text-align:center;
        cursor:pointer;
    }

    /*切换数字时用的样式*/
    .all ol .on{
        background:#E97305;
        color:#fff;
    }

window.onload = function(){
        //获取整个div的id给变量wrap
        var all  = document.getElementById('all'),
        //获取图片列表中li标签（四张图片）给变量pic
            pic   = document.getElementById('pic').getElementsByTagName("li"),
        //获取数字列表中li标签（1,2,3,4）给list
            list  = document.getElementById('list').getElementsByTagName('li'),
        //定义数组下标初始值为0
            index = 0,
        //定义定时器初始值为空
            timer = null;

        // (3)定义并调用自动播放函数定时器
        timer = setInterval(autoPlay, 1000);

        //(5)鼠标指针移到整个容器时停止自动播放（函数）
        all.onmouseover = function () {
            clearInterval(timer);//停止定时器
        }
        //(4) 鼠标离开整个容器时继续播放至下一张
        all.onmouseout = function () {
            timer = setInterval(autoPlay, 1000);
        }

        //(1)自动播放函数
        function autoPlay () {
            //++index 每调用一次，数字下标+1
            if(++index >= pic.length){  //当下标调用到3时（图片长度为4），就是调用到最后时（数字4，图片第四张）
                index = 0;              //下标重新从0开始调用
            }
            changePic(index);           //调用图片切换函数，数字加css效果
        }

        // (6)遍历所有数字导航实现划过切换至对应的图片
        for (var i = 0; i < list.length; i++) {     //list.length -》数字下标总长度
            list[i].onmouseover = function () {     //当鼠标移到某个数字上时触发函数
                clearInterval(timer);               //暂停轮播
                index = this.innerHTML - 1;         //下标=当前循环到的数字的值-1
                changePic(index);                   //下标的值传到下面图片切换函数
            };
        }


        //(2) 定义图片切换函数
        function changePic (curIndex) {             //此处的值为上面的下标值
            for(var i = 0; i < pic.length; i++) {   //pic.length-》图片下标总长度
                pic[i].style.display = "none";      //图片[下标]的属性为隐藏
                list[i].className = "";             //数字[下标]-》class="";
            }
            pic[curIndex].style.display = "block";  //curIndex的值在上一个for循环中为要切换的图片
            list[curIndex].className = "on";        //给要切换的图片class="on",在css样式中（.on）有效果
        }
    }