用jquery写的一个图片轮播插件

尝试用Jq写了一个图片轮播的插件，目前包含了三种模式：

1、自动进行切换，鼠标移入暂停，移出继续，可控制时间；

2、自动进行切换，鼠标移入暂停，移出继续，可控制时间；有数字下标对图片轮播进行控制；

3、自动进行切换，鼠标移入暂停，移出继续，可控制时间；用箭头对图片轮播进行控制。

目前的效果是，图片移动到最后一张时，再向右移动会直接拉回第一张，以后可能会进行改进。

html css和js代码就不放了，使用三个ul存放图片，进行测试；在js代码中直接用存放ul的div来调用插件就可以了。

  1 ;(function($){
  2     $.fn.picSwitch = function(options){
  3         var defaults = {
  4             autoScroll:true,    //是否可以运动，默认为是
  5             numControl:false,   //是否由数字来进行控制
  6             arrowControl:false,  //是否由箭头来进行控制
  7             speed:1000             //控制图片移动的速度
  8         };
  9 
 10         var settings = $.extend({},defaults,options);
 11 
 12         //开始写业务逻辑
 13         var box = $(this),  //取得调用函数的选择器，也就是div节点对象
 14             ul = box.find("ul"),    //在div节点对象下寻找ul节点对象
 15             li = ul.find("li"),     //在ul节点对象下寸照li节点对象
 16             img = li.find("img"),   //在li节点对象下寻找img节点对象
 17             width = box.width(),    //取得box的宽
 18             height = box.height(),  //取得box的高
 19             len = li.length,
 20             timer = null,       //定时器
 21             idx = 0;
 22 
 23         //让图片和li的宽高跟着box变化，这样一来，在css中就只用设置box（div）的宽高了
 24         //用add函数来同时给li和img加上样式
 25         li.add(img).css({
 26            width,
 27            height:height
 28         });
 29         ul.css({
 30             width*len,
 31             height:height
 32         });
 33 
 34 
 35         if(settings.autoScroll){
 36             timer = setInterval(picMove,settings.speed);
 37         }
 38         if (settings.numControl) {
 39             //在box中加入装数字的div节点，并且赋予其id nums，注意在Html中不要给其他节点nums的id
 40             box.append("<div id='nums'></div>");
 41             for (var i = 0; i < len; i++) {
 42                 $("#nums").append("<span>" + (i + 1) + "</span>");
 43             }
 44             //鼠标移入的时候要实现两个效果：一个是给移入的span增加class，并删除其他span的class；另一个则是将ul图片的位置进行移动
 45             $("#nums").find("span").on("mouseover", function () {
 46                 $(this).addClass("active").siblings().removeClass("active");
 47                 idx = $(this).index();
 48 
 49                 ul.animate({left: -(width * idx)}, settings.speed);
 50             });
 51         }
 52 
 53         if(settings.arrowControl){
 54             //在box中加入装数字的div节点，并且赋予其id arrows，注意在Html中不要给其他节点arrows的id
 55             box.append("<div id='arrows'></div>");
 56             //加入两个span，分别赋予其左右箭头的class
 57             $("#arrows").append("<span class='leftBtn'>" + "<" + "</span>");
 58             $("#arrows").append("<span class='rightBtn'>" + ">" + "</span>");
 59 
 61             $("#arrows").find(".leftBtn").on("click",function(){
 62                 idx--;
 63                 if(idx<0){
 64                     idx=5;
 65                 }
 66                 ul.animate({left:-(width*idx)},settings.speed);
 67             });
 68             $("#arrows").find(".rightBtn").on("click",function(){
 69                 picMove();
 70             });
 71 
 72         }
 73 
 74 
 75 
 76         box.on("mouseover",function(){
 77             clearInterval(timer);
 78         });
 79         box.on("mouseout",function(){
 80             if(settings.autoScroll){
 81                 timer = setInterval(picMove,settings.speed);
 82             }
 83         });
 84 
 85 
 86         //控制图片移动的函数
 87         function picMove(){
 88 
 89             idx++;
 90             if(idx>len-1){
 91                 idx=0;
 92             }
 93             $(box).find("span").eq(idx).addClass("active").siblings().removeClass("active");
 94             ul.animate({left:-(width*idx)},settings.speed);
 95 
 96 
 97         }
 98 
 99         return this;
100     }
101 })(jQuery);