基础幻灯片

常见的幻灯片效果就是轮播+渐变，就是用定时器来逐步改变图片位置（轮播）、图片某个属性（渐变），还有就是根据需要监听鼠标动作控制幻灯片的播放。

下面列举几种比较常见的幻灯片实现：

1、  把所有图片层叠放着，定时器每次执行使某张图透明度为1，其他为0，当然透明度的渐变也由定时器控制。

function show(ind){

                   index=ind;

                   for(i=0;i<l1.length;i++) //l1是图片列表

                            l1[i].style.opacity=0;

                   for(i=0;i<l2.length;i++)     //l2是幻灯片索引列表

                            l2[i].className=””;         

                   count=0;

                   s=setInterval(function(){

                            if(l1[index].style.opacity<1)

                                     l1[index].style.opacity=count*0.1;

                            else{

    clearInterval(s);  //实现图片出现是渐变的

    }                

                            count++;                             

                   },20);

                   l2[index].className="current";

                  

}

//自动播放

function autoplay(){

         play=setInterval(function(){    

                   index++;  

                   if(index>=l1.length)index=0;

                   show(index);                               

         },2000);

}

 

2、  最常见的方法是把图片设置成排成一行(left)/一列(top)，每次执行移动整个列表的的left/top，看起来就好像在滚动。

function show(ind){

                   index=ind;                 

                   aim=-index*400+"px";              //索引为0的图片本次移动的目标位置

   clearInterval(s);  //每次创建新的定时器删除之前的定时器

                   s=setInterval(function(){                   

                            if(l1[0].style.left!=aim){  //图片没有到达aim位置应该继续滑动

                                     if(index==0){  //index为0时应该所有图片回复一开始位置

                                               for(i=0;i<l1.length;i++)

                                                                  l1[i].style.left=parseInt(l1[i].style.left.substr(l1[i].length-2))+400+"px";

                                     }else{                                   

                                               for(i=0;i<l1.length;i++)

                                                                  l1[i].style.left=parseInt(l1[i].style.left.substr(l1[i].length-2))-100+"px";

                                     }

                            }else{   //到达aim位置清除定时器

                                     clearInterval(s);

                            }                

 

                   },50);                          

                   for(i=0;i<l2.length;i++)

                            l2[i].className="";         

                   count=0;                                      

                   l2[index].className="current";              

}

3、  不断的把列表的一个元素添加到最后一个，appendChild会将节点从原来的位置移除，所以借此可以产生切换效果。

var img_list =document.getElementById('img_list');

setInterval(function(){

     img_list.appendChild(firstchild(img_list));

     for(i=0;i<img_list.childNodes.length;i++)

              if(img_list.childNodes[i].nodeName!== "#text") //childnodes包含文本节点，要进行节点类型判断

                       img_list.childNodes[i].style.opacity=0;

     count=0;

     s=setInterval(function(){         

              /*省略实现渐变参考1*/

 

     },20);

},1000)

function firstchild(a){

         for(i=0;i<img_list.childNodes.length;i++)

                   if(img_list.childNodes[i].nodeName!== "#text") {                   

                            returnimg_list.childNodes[i];

                   }       

                           

}

4、  css3实现的幻灯片效果，像是平滑移动的长图。

@-webkit-keyframes myAnimation{

0%{

top:0;

}

40%{

top:-200px;

}

70%{

top:-400px;

}

100%{

top:-600px;

}

}

#test ul{

-webkit-animation-name:myAnimation;

-webkit-animation-duration:4s;

-webkit-animation-timing-function:linear;

-webkit-animation-iteration-count:infinite;

}

<div id="test">

<ul>

<li><img width="300"height="200" src="../image/a.jpg" alt=""/></li>

……

</ul>

</div>

 

所有的方法都是设置父元素relative，子元素absolute，则子以父为基，移动。

然后加上鼠标动作监听：鼠标停留在div上clear定时器；点击或滑过某个索引调用显示某个图的函数；鼠标离开div调用autoplay。就实现了基本的幻灯片播放啦。