简单的jQuery幻灯片实例

DEMO1

CSS:

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

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);

  

HTML:

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

 

DEMO2

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);

HTML:

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