jQuery学习：简单的渐入渐出图片切换

jQuery提供了渐入渐出的方法：.fadeIn()和.fadeOut()，利用这两个方法和其他方法，可以实现简单的渐入渐出图片切换动画。

首先设计好要切换的图片，通常是做成UL：

   1: <div id="slider">

   2:   <ul>

   3:     <li><img src="1.jpg" />li>

   4:     <li><img src="2.jpg" />li>

   5:     <li><img src="3.jpg" />li>

   6:     <li><img src="4.jpg" />li>

   7:   ul>

   8: div>

然后简单地设置一下样式：

   1: #slider {

   2:   width: 400px;

   3:   height: 300px;

   4:   position: relative;

   5: }

   6:  

   7: #slider ul { list-style-type: none; }

   8:  

   9: #slider ul li { 

  10:   position: absolute;

  11:   left: 0;

  12:   top: 0;

  13: }

通过样式表基本上就可以猜到实现的原理就是这些图片通过绝对定位叠在一起，然后通过.fadeOut()和.fadeIn()依次显示这些图片。

下面开始编写脚本，首先做准备工作：

   1: var option = {

   2:     speed: 1000,  // 渐变时间

   3:     timeout: 3000 // 停留时间

   4: };

然后将所有的LI隐藏，只显示第一个：

   1: var $li = $("#slider ul li");

   2: $li.hide();

   3: $($li[0]).show();

然后设置定时器，调用showNext函数：

   1: setTimeout(function(){ showNext(1, 0); }, o.timeout);

最后定义showNext函数：

   1: function showNext(n, c){ 

   2:     $($li[c]).fadeOut(o.speed);

   3:     $($li[n]).fadeIn(o.speed);

   4:     c = n;

   5:     n = (n >= $li.length - 1) ? 0 : n+1;

   6:     

   7:     setTimeout(function(){ showNext(n, c); }, o.timeout);

   8:   }

这样就做好了，效果还不错吧，完整的脚本代码如下：

   1: $(document).ready(function(){

   2:   

   3:   var o = { speed: 1000, timeout: 2000 };

   4:   var $li = $("#slider ul li");

   5:   $li.hide();

   6:   $($li[0]).show();

   7:  

   8:   setTimeout(function(){ showNext(1, 0); }, o.timeout);

   9:  

  10:   function showNext(n, c){ 

  11:     $($li[c]).fadeOut(o.speed);

  12:     $($li[n]).fadeIn(o.speed);

  13:     c = n;

  14:     n = (n >= $li.length - 1) ? 0 : n+1;

  15:     

  16:     setTimeout(function(){ showNext(n, c); }, o.timeout);

  17:   }

  18: });