jQuery图片轮播插件

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>
哟？不错哎 订阅飞鱼的RSS Feeds 回去慢慢看^_^

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