飞鱼 ^_^ 浆抱罗斯‘s blog

jQuery图片轮播插件

作者：飞鱼
制作工具：notpad++
使用语言：javascript
最近写的这个图片轮播插件，于是乎拿出来晒晒，分享点菜鸟心得。大虾可以旁观^_^

功能描述

就是一个简单的js轮播，第一张图变白，然后切换成第二张图。鼠标放上去后图片不切换，移开又开始了。 可以给组图片加效果，并且不冲突。
有空补一下 代码注释，以及 setInterval 的应用

演示效果图

演示地址： 跳转地址

js 代码

(function($) {
  $.fn.fadPicture = function(d) {
    var df = 3000;
    delay = d ? (d < df ? df : d) : df;
    $(this).each(function(i){
      var t = $(this),
        mc = function(){
          var  ul = t,
            first = ul.find('li:first');
          ul.fadeOut('show',
            function(){
              first.appendTo(ul);
            }
          );
          ul.fadeIn();
        };
      var interval = setInterval(function(){
        mc();
      }, delay);
      t.hover(
        function(){
          clearInterval(interval);
          t.data('start',false);
        },
        function(){
          interval = setInterval(function(){
            mc();
          }, delay);
        }
      );
    });
  };
})(jQuery);

使用方法

$(document).ready(function(){
  $('.fadPicture').fadPicture();
  // $('.fadPicture').fadPicture(5000);  //时间5秒
});

html写法

<ul class="fadPicture">
      <li><img src="http://001.jpg" alt="001" /></li>
      <li><img src="http://002.jpg" alt="001" /></li>
      <li><img src="http://003.jpg" alt="001" /></li>
    </ul>

您可能还对这些日志感兴趣

• 发现一个jQuery初学者的天堂
• 乱翻乱教 – M8开发环境(vs2008)配置 [菜鸟版]
• 系统级应用项目中的函数命名冲突问题
• 走马观花 – jQuery调试工具- jQuery pad
• 隔山打牛 – jQuery中 trigger() & bind() 使用心得 (二)