jQuery插件版无缝轮播，重写了之前的代码，显得更高大上一点

  1 ;
  2 (function($) {
  3     var slidePictures = function() {
  4         var self          = this;
  5         this.slidePic     = $("#slide_pic"); //内容区域大图片的外层ul
  6         this.slideItem    = $("#slide_item"); //底部小图片的外层ul
  7         this.slidePic_li  = $("#slide_pic li"); //内容区域大图片
  8         this.slideItem_li = $("#slide_item li"); //底部小图片
  9         this.prevBtn      = $("#preBtn"); //前进按钮
 10         this.nextBtn      = $("#nextBtn"); //后退按钮
 11         this.length       = this.slidePic_li.length; //ul中图片的个数，因为大图和小图是一一对应的，所以个数相同
 12         this.speed        = 500; //speed为图片滑动速度，数值越大速度越慢
 13         this.index        = 0; //第一次显示的是第一张图片，所以索引为0；表明当前正在显示的图片索引
 14         this.timer;//定义一个定时器参数
 15         // 初始化各项参数和属性
 16         self.init();
 17         // 首先克隆一份第一张图片,并将其添加到外层ul中
 18         var clone = this.slidePic_li.first().clone();
 19         this.slidePic.append(clone);
 20         // 这里需要重新获取一下li,因为之前的this.slidePic_li保存的是克隆前的数据
 21         this.length = $("#slide_pic li").length;
 22         
 23         this.prevBtn.click(function() {
 24             self.moveByClick(1);
 25         });
 26         this.nextBtn.click(function() {
 27             self.moveByClick(-1);
 28         });
 29     }
 30     slidePictures.prototype = {
 31         // 初始化函数，当页面刚加载完给页面一些默认的样式，或者执行相关函数
 32         init: function() {
 33             // 首先给外层ul一个left属性为0；
 34             this.slidePic.css("left", 0);
 35             // 获取每一个图片的宽度
 36             this.width = this.slidePic_li.width();
 37             // 将第一个小图片透明度默认设为1
 38             this.slideItem_li.first().css("opacity", "1");
 39             // 给每一个小图片添加一个id属性，用于标识
 40             this.giveItemAttrId();
 41             this.autoChange();
 42             this.cancleTimer();
 43             this.mouseoverShowBigPic();
 44         },
 45         // 突出显示底部小图片，用于标识当前大图位置，id为0即显示第一个
 46         showItem: function(id) {
 47             // 判断id值
 48             var item = id;
 49             if (item == this.length - 1) {
 50                 item = 0;
 51             }
 52             // 将所有的小图片透明度设为.3
 53             this.slideItem_li.css("opacity", ".3");
 54             // 将当前id的小图片透明度设为1
 55             this.slideItem_li.eq(item).css("opacity", "1");
 56         },
 57         // 得到当前透明度为needOpc的图片序号
 58         getCurrentShowPic: function(needOpc) {
 59             var item = 0;
 60             this.slideItem_li.each(function(index, el) {
 61                 var opc = $(this).css("opacity");
 62                 if (opc == needOpc) {
 63                     item = index;
 64                 }
 65             });
 66             return item;
 67         },
 68         mouseoverShowBigPic:function(){
 69             var self = this;
 70             this.slideItem_li.on(‘mouseover‘,function(){
 71                 var id = $(this).attr("id");
 72                 self.showNow(id);//显示大图片
 73                 self.showItem(id);//显示对应小图片
 74             })
 75         },
 76         // 鼠标划过小图片时显示对应的大图
 77         showNow: function(id) {
 78 
 79             // 找到当前显示的图片的序号，item为当前序号
 80             var item = this.getCurrentShowPic();
 81             // 计算需要移动的距离
 82             var needMove = id * this.width;
 83             // 如果当前显示的图片在鼠标划过的图片的左方，则向左滑动，否则向右滑动
 84             if (id > item) {
 85                 this.slidePic.stop().animate({ left: "-" + needMove + "px" }, this.speed);
 86             } else {
 87                 this.slidePic.stop().animate({ left: "-" + needMove + "px" }, this.speed);
 88             }
 89             // 更新this.index;
 90             this.index = id;
 91         },
 92         // 每次鼠标点击左右按钮时滑动一张图片
 93         moveByClick: function(flag) {
 94             //如果没有传入参数则默认为1；
 95             var flag = flag||-1;
 96             // flag用于标记点击的是左键还是右键,flag > 0为左键，反之为右键
 97             // length为图片的个数
 98             var length = this.length;
 99             var width = this.width;
100             var speed = this.speed;
101             // 当点击的是左键时
102             if (flag > 0) {
103                 this.index--;
104                 if (this.index == -1) {
105                     this.slidePic.css("left", "-" + (length - 1) * width + "px");
106                     // 突出显示对应的底部小图片
107                     this.index = length - 2;
108                 }
109                 this.slidePic.stop().animate({ left: "-" + this.index * width + "px" }, speed);
110                 this.showItem(this.index);
111                 
112             } else { //点击右键时
113                 this.index++;
114                 /*当index为最后一张图片时，先将外层ul的left值设为0
115                 此时最后一张图片为后来克隆添加上的，将left值改为0后实际上显示的是第一张图片了
116                 但是由于最后一张和第一张相同，人眼看不出差别，所以以为还没有改变
117                 然后再将index设为1，让其切换到下一张图片，从而实现无缝轮播
118                 点击左键时原理相同
119                 */
120                 if (this.index == length) {
121                     this.slidePic.css("left", "0px");
122                     this.index = 1;
123                 }
124                 this.slidePic.stop().animate({ left: "-" + this.index * width + "px" }, speed);
125                 this.showItem(this.index);
126                 
127             }
128         },
129         // 将所有的小图片透明度设为需要的值
130         hideAllitem: function(opc) {
131             this.slideItem_li.each(function(index, el) {
132                 $(this).css("opacity", opc);
133             });
134         },
135         
136         // 自动切换
137         autoChange: function() {
138             var self = this;
139             this.timer = setInterval(function(){
140                 self.moveByClick();
141             },1500);
142         },
143         //当鼠标划过相关区域时，停止自动播放
144         cancleTimer:function(){
145             var self = this;
146             $(".jq_wrap").on("mouseover",function(){
147                 clearInterval(self.timer);
148             });
149             $(".jq_wrap").on("mouseout",function(){
150                 self.autoChange();
151             })
152         },
153         // 给底部小图片一个id属性，用于标识
154         giveItemAttrId: function() {
155             var self = this;
156             this.slideItem_li.each(function(index, el) {
157                 $(this).attr("id", index);
158             });
159         }
160     };
161     window["slidePictures"] = slidePictures;
162 })(jQuery);