纯 jQuery 实现图片轮换效果

学习笔记 马富天 2017-08-11 09:39:58 78 0

【摘要】图片轮换效果是网站开发中比较常用的手段之一。应用这样的一个模块可以起到非常好的广告效应,使得页面的友好程度大大增加。而我早就想要用代码实现这么一个效果,刚好有时间就写了一个看起非常简单的 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(不限任何版本),代码执行后截图如下:

请输入图片名称

版权归 马富天PHP博客 所有

本文标题:《纯 jQuery 实现图片轮换效果》

本文链接地址:http://www.mafutian.net/304.html

转载请务必注明出处,小生将不胜感激,谢谢! 喜欢本文或觉得本文对您有帮助,请分享给您的朋友 ^_^

1

1

上一篇《 使用 jQuery 获取某一个子元素的个数 》 下一篇《 如何通过使用 git 在 github 上面创建自己的代码仓库 》

暂无评论

评论审核未开启
表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情
验证码

TOP10

  • 浏览最多
  • 评论最多