两个简单的jQuery幻灯片实现

admin

淡入淡出幻灯片效果

首先我们建一个DIV，里面包括5张img

1. <div id="slider1">
   
2.         <img src="images/1.jpg" border="0" style="display:block;"/>
   
3.         <img src="images/2.jpg" border="0" />
   
4.         <img src="images/3.jpg" border="0" />
   
5.         <img src="images/4.jpg" border="0" />
   
6.         <img src="images/5.jpg" border="0" />
   
7. </div>

复制代码

其中主要css部分代码如下：

1. #slider1{
   
2.         margin:20px auto;
   
3.         height:240px;
   
4.         width:740px;
   
5.         position:relative;
   
6. }         
   
7. #slider1 img{
   
8.         position: absolute;
   
9.         top: 0px;
   
10.         left: 0px;
    
11.         display:none;
    
12. }

复制代码

原理分析：通过间隔一定时间来改变下一张图片的z-index，实现淡入淡出的幻灯片效果，具体js部分代码如下：

1. var now=0;
   
2. setInterval(function (){
   
3.         pre=now===0?2:now-1;
   
4.         nxt=now===4?0:now+1;
   
5.         var div=$("#slider1").children();
   
6.         div.eq(now).fadeOut(0,function(){   
   
7.                 div.css('z-index',1);      
   
8.                 div.eq(nxt).css("z-index",6).fadeIn(600);
   
9.                 div.eq(pre).css("z-index",4);
   
10.                 div.eq(now).css("z-index",5);
    
11.                 now=nxt;
    
12.         });
    
13. },3000);

复制代码

滚动幻灯片效果

建立两个DIV，ID分别为slider2跟children，slider2为父div，children为子DIV，包含5张img，父 DIV（slider2）设置为overflow：hidden。

1. <div id="slider2">
   
2.         <div id="children">
   
3.                 <img src="images/1.jpg" border="0"/>
   
4.                 <img src="images/2.jpg" border="0"/>
   
5.                 <img src="images/3.jpg" border="0"/>
   
6.                 <img src="images/4.jpg" border="0"/>
   
7.                 <img src="images/5.jpg" border="0"/>
   
8.         </div>
   
9. </div>

复制代码

主要CSS部分如下：

1. #slider2{
   
2.         overflow:hidden;
   
3.         margin:20px auto;
   
4.         height:240px;
   
5.         width:740px;
   
6.         position:relative;
   
7. }
   
8. #children img{
   
9.         width:740px;
   
10.         height:240px;
    
11.         margin:0;
    
12.         padding:0;
    
13.         float:left;
    
14. }
    
15. #children{
    
16.         height:240px;
    
17.         position:relative;
    
18.         width:740px;
    
19. }

复制代码

原理分析：通过间隔一定时间，来改变图片的绝对位置，时间滚动动画的幻灯片代码，具体js部分代码如下：

1.     var slider=1;
   
2.     setInterval(function(){
   
3.                     slider=slider===5?0:slider;               
   
4.                     var t=-slider*240;
   
5.                     slider++;
   
6.                     $("#children").animate({top:t},600);
   
7.     },3000);

复制代码