纯 jQuery 实现图片轮换效果

【摘要】图片轮换效果是网站开发中比较常用的手段之一。应用这样的一个模块可以起到非常好的广告效应，使得页面的友好程度大大增加。而我早就想要用代码实现这么一个效果，刚好有时间就写了一个看起非常简单的 jQuery 代码实现图片的轮换效果，个人觉得非常简单实用而且效果很好看。

css 样式代码：

1. *{padding:0;margin:0;font-size:12px;list-style:none;}

2. ul{border:1px solid #AACCEE;width:200px;height:200px;margin:20px auto;overflow:hidden;border-radius:4px;}

3. ul li{width:100%;display:none;}

4. ul .active{display:block;}

5. ul li img{width:100%;}

html 代码：

1. <ul>

2.     <li class="active"><img src="image/1.jpg"></li>

3.     <li><img src="image/2.jpg"></li>

4.     <li><img src="image/3.jpg"></li>

5.     <li><img src="image/4.jpg"></li>

6.     <li><img src="image/5.jpg"></li>

7. </ul>

js 代码如下：

1. var len = $("ul").children("li").length;

2. var num = 0;

3. setInterval(function(){

4.     if(num > 0){

5.         $('ul li').eq(num - 1).fadeOut("slow");

6.     }

7.     $('ul li').eq(num).fadeIn("slow");

8.     if(num < len - 1)

9.     {

10.         ++num;

11.     }else{

12.         num = 0;

13.     }

14. },1500);

图片元素：

将这些代码复制到 html 文件中，并引入 jQuery（不限任何版本），代码执行后截图如下：

我要打赏