两个简单的jQuery幻灯片实例

上周的手脑会议我为了演示jQuery动画的强大功能，顺手做了两个简单的jQuery幻灯片实例，其中一个是运用的fadeIn、fadeOut，另外一个使用的是滚动的效果。因为是给公司内部CSS人员做jQuery动画演示，所以也没有做什么美化，今天顺手放出来，算是凑一篇文章吧~

淡入淡出幻灯片效果

首先我们建一个DIV，里面包括5张img，其中主要css部分代码如下：

#slider1{
	margin:20px auto;
	height:240px;
	width:740px;
	position:relative;
	}	 
#slider1 img{
	position: absolute; 
	top: 0px; 
	left: 0px;
	display:none;
}

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

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

滚动幻灯片效果

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

 #slider2{
	overflow:hidden;
        margin:20px auto;
	height:240px;
	width:740px;
	position:relative;
	}
#children img{
      	width:740px;
	height:240px;
	margin:0;
	padding:0;
	float:left;
      }
#children{
	height:240px;
        position:relative;
        width:740px;
	}

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

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

程序演示地址：http://js8.in/mywork/jquery_slider/