★吉光片羽 是壹穜風格★

于是乎，我百度了，搜“JQuery幻灯片”，结果一大堆复杂的内容，不少还是插件形式的，又得载入一长串的JS代码，所以我常常索性自己做针对性的开发。接着搜索“简单 JQuery 幻灯片”，答案很理想，立马找到了想要的结果，大家快来一睹为快吧！分别有两种效果，一种淡入淡出的幻灯片效果，一种最近貌似比较流行的像淘宝网之类经常会用的向上滑动的效果，才发现，原来这两种Slide效果也只是简单的几行代码就能搞定的，实在是爽哉！

先来看看简单的淡入淡出的JQuery幻灯片效果的xhtml部分：

CSS样式表

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

HTML代码

<div id="slider">
<img src="images/1.jpg" border="0" style="display:block;"/>
<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>

接着是神奇的JQuery代码部分：

JQuery代码

var now=0;
setInterval(function (){
pre=now===0?2:now-1;
nxt=now===4?0:now+1;
var div=$("#slider").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);

工作原理：通过定时改变图片的z-index层级并利用fadeOut()渐隐的特效，很简单吧！

接下来是比较时髦的JQuery向上滑动幻灯片特效的xhtml部分：

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

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>
</div>

最后是最为神奇的JQuery代码，只需短短的几行：

JQuery代码

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

工作原理：定时改变图片的绝对位置，不难想象吧，就是这么简单！

最后，还是来看实际演示吧，同时要特别感谢提供以上代码的断桥残雪部落格。当然，以上代码只是提供了一个幻灯片效果实现的思路，在此基础上还可以拓展出很多种应用，我目前亟待解决的就是增加鼠标悬停就停止播放的功能，以及图片数量的现实及切换效果。有时间继续研究，并将其完善。