jQuery简单自定义图片轮播插件及用法示例

本文实例讲述了jQuery简单自定义图片轮播插件及用法。分享给大家供大家参考，具体如下：

经常使用别人的插件，现在自己写一个，纪念一下。

jQuery.banner.js：

;(function($){
  $.fn.banner =function(options){
    //各种属性和参数
    var defaults ={
picWidth:"1000",
      picHeight:"300",
      speed:"1500"
    };
    var totalW = 0;  //保存总的动画宽度
    var timer = null; //保存定时器
    var current = 0; //保存当前动画到第N张图，下次从这里开始
    var totalNum = 0; //保存总的图数
    var Dsqtime = 0; //定义定时器时间 【外传参数】
    var Dhtime = 0;  //定义动画时间
    var count = 0 ;
    //合并多个对象为一个，即有新参数 用新的，否则用默认的
    var options = $.extend(defaults, options);
    this.each(function(){
      //实现代码
      var __this = $(this);
      Dsqtime = options.speed;
      Dhtime = Dsqtime/3;
      //初始化
      init(__this);
      //调用动画
      show(__this, options.picWidth,current);
      //鼠标经过时事件
      __this.find('ul li').bind('mouseover',function(){
 window.clearInterval(timer); //清除定时器
      });
      __this.find('ul li').bind('mouseout',function(){
 show(__this, options.picWidth,current);
  //接着上一次动画轮播
      });
    });
    //初始化 设定父容器宽度
    function init(obj){
      obj.find('ul li').each(function(){
  totalW += $(this).width();
  totalNum++;
});
      obj.find('ul').width(totalW);
    }
    //开始动画显示
    function show(obj, width, current){
      timer = setInterval(function(){
      obj.find('ul').animate({'margin-left':'-'+count*width+'px'},
  Dhtime);
   current = count;
   count++;
   if(count == totalNum){
    count =0;
   }
}, Dsqtime);
    }
  };
})(jQuery);

html代码：

 
   
   
   
   
   
     *{margin:0;padding:0;}
     .wrap{width:1000px; height:300px; overflow:hidden; margin:0 auto;}
     .wrap ul li{float:left; list-style:none;}
     .wrap ul li img{width:1000px;height:300px;}
     .clear{clear: both;}
   
 
 
   
    
      

 

 

 

 

 

      
      
    
   
 

效果图：

更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery常用插件及用法总结》、《jQuery扩展技巧总结》、《jQuery切换特效与技巧总结》、《jQuery遍历算法与技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》

希望本文所述对大家jQuery程序设计有所帮助。