幻灯片播放效果

和无缝滑动不一样，幻灯片播放是缓冲运动，而前者是呆板的匀速运动.

效果如图:

简单思路如下(只说JS部分，CSS较为简单):

图片的运动：通过ul的top值来让图片运动。比如开始的时候整个ul的top值是-1500px(这里每一张图片的高度都是300px)，然后每隔2秒让top值变化300，用startMove函数（前面说过的运动框架）来让它运动。

小方块的透明度变化:用一个变量记录当前播放到的位置，接着把循环把所有的小方块的透明度都变为40，然后再把当前小方块的透明度变为100，一样用startMove函数。

HTML代码:

 <div id="pic">
        <ul id="pic-list">
            <li><a href="javascript:;"><img src="img/1.png" alt=""></a></li>
            <li><a href="javascript:;"><img src="img/2.png" alt=""></a></li>
            <li><a href="javascript:;"><img src="img/3.png" alt=""></a></li>
            <li><a href="javascript:;"><img src="img/4.png" alt=""></a></li>
            <li><a href="javascript:;"><img src="img/5.png" alt=""></a></li>
            <li><a href="javascript:;"><img src="img/6.png" alt=""></a></li>
        </ul>
        <ul id="pic-num">
            <li style="filter:alpha(opacity:100);opacity: 1;">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
        </ul>
    </div>

CSS代码:

*{margin:0;padding:0;}
        ul,li{list-style-type: none;}
        /*整个幻灯片的大小和位置*/
        #pic{width: 400px;height:300px;position: relative;margin:10px auto;overflow: hidden;}
        /*整个幻灯片的大小和位置结束*/
        /*图片列表的大小和位置*/
        #pic #pic-list{width:400px;height:300px;position: absolute;left:0;top:-1500px;}
        #pic #pic-list li{width:400px;height:300px;}
        /*图片列表的大小和位置结束*/
        /*小方块的大小和位置*/
        #pic #pic-num{width:150px;height:20px;position: absolute;right: 10px;bottom: 10px;z-index: 1;}
        #pic #pic-num li{display: block;width:20px;height:20px;background: yellow;float:left;margin:2px; text-align: center;line-height: 20px;cursor: pointer; filter:alpha(opacity:40);opacity: 0.4;}
        /*小方块的大小和位置结束*/

JS代码:

   window.onload = function () {
            var oDiv = document.getElementById('pic');
            var oUl1 = document.getElementById('pic-list');
            var oUl2 = document.getElementById('pic-num');
            var aLi1 = oUl1.getElementsByTagName('li');
            var aLi2 = oUl2.getElementsByTagName('li');
            var timerId = 0;
            var cur = 1;           //记录当前播放的图片序号
            start();  //开始播放幻灯片
            for(var i = 0;i<aLi2.length ;i++)
            {
                aLi2[i].index = i;
                aLi2[i].onmouseover =  function () {
                    cur = this.index;     
                    tab(this);    //手动切换图片
                };
            }
            oDiv.onmouseover = function () {
                 clearInterval(timerId);  //当鼠标移入div的时候停止播放
            };
            oDiv.onmouseout = function () {
                 start();                //移出后继续播放
            }; 
            //播放幻灯片函数
            function start() {
                timerId = setInterval(function () {
                    tab(aLi2[cur++%6]);
                },2000);
            }
            //切换幻灯片函数
            function tab(obj) {
                startMove(oUl1,{top:-1500+obj.index*300});
                for(var j=0;j<aLi2.length;j++)           //先把所有的透明度都变为40
                    startMove(aLi2[j],{opacity:40});
                startMove(obj,{opacity:100});            //再把当前的透明度变为100，保证只有一个是100
            }
        }