jQuery学习：简单的渐入渐出图片切换-优快云博客

本文介绍如何使用jQuery实现一个简单的图片轮播效果。通过.fadeIn()和.fadeOut()方法结合定时器，实现图片的渐入渐出切换动画。适用于网页设计中需要动态展示多张图片的场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

   1: <div id="slider">
<!--CRLF-->
   2:   <ul>
<!--CRLF-->
   3:     <li><img src="1.jpg" />li>
<!--CRLF-->
   4:     <li><img src="2.jpg" />li>
<!--CRLF-->
   5:     <li><img src="3.jpg" />li>
<!--CRLF-->
   6:     <li><img src="4.jpg" />li>
<!--CRLF-->
   7:   ul>
<!--CRLF-->
   8: div>
<!--CRLF-->

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

   1: #slider {
<!--CRLF-->
   2:   width: 400px;
<!--CRLF-->
   3:   height: 300px;
<!--CRLF-->
   4:   position: relative;
<!--CRLF-->
   5: }
<!--CRLF-->
   6: 
<!--CRLF-->
   7: #slider ul { list-style-type: none; }
<!--CRLF-->
   8: 
<!--CRLF-->
   9: #slider ul li { 
<!--CRLF-->
  10:   position: absolute;
<!--CRLF-->
  11:   left: 0;
<!--CRLF-->
  12:   top: 0;
<!--CRLF-->
  13: }
<!--CRLF-->

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

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

   1: var option = {
<!--CRLF-->
   2:     speed: 1000,  // 渐变时间
<!--CRLF-->
   3:     timeout: 3000 // 停留时间
<!--CRLF-->
   4: };
<!--CRLF-->

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

   1: var $li = $("#slider ul li");
<!--CRLF-->
   2: $li.hide();
<!--CRLF-->
   3: $($li[0]).show();
<!--CRLF-->

然后设置定时器，调用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: });