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）有效果        }    }