js实现无缝轮播图插件封装

<div class="container mycontainer">
 <div class="wrapper">
 <div class="slide">
  <img src="image/jd01.jpg" alt="">
 </div>
 <div class="slide">
  <img src="image/jd02.jpg" alt="">
 </div>
 <div class="slide">
  <img src="image/jd03.jpg" alt="">
 </div>
 <div class="slide">
  <img src="image/jd04.jpg" alt="">
 </div>
 </div>
 <!-- 分页器 -->
 <ul class="pagination"></ul>
 <!-- 导航按钮 -->
 <div class="button-pre"></div>
 <div class="button-next"></div>
</div>

 {
 margin: 0;
 padding: 0;
}

ul,
li {
 list-style: none;
}

.container { 
 margin: 200px auto;
 position: relative;
 overflow: hidden;
}

.slide {
 float: left;
}

img {
 display: block;
}

.pagination {
 width: 160px;
 position: absolute;
 bottom: 30px;
 margin-left: -80px;
 left: 50%;
}

.pagination li {
 float: left;
 width: 20px;
 height: 20px;
 background-color: blue;
 margin: 0 10px;
 border-radius: 50%;
}

.button-pre,
.button-next {
 width: 22px;
 height: 40px;
 position: absolute;
 : 50%;
 margin-: -20px;
}

.button-pre {
 left: 30px;
 background: url('../image/left.png') no-repeat center center;
}

.button-next {
 right: 30px;
 background: url('../image/right.png') no-repeat center center;
}

.pagination .active {
 background-color: red;
}
.mycontainer{
 width: 590px;
 height: 470px;
}

;(function($){
 // 默认设置
 var defaults = {
 speed:1000,
 interval:2000
 }
 function Banner(ele,options){
 // 获取元素对象
 this.element = $(ele);
 // 合并设置项
 this.options = $.extend({},defaults,options);
 // 获取包裹图片的父元素
 this.wrapper = this.element.children().first();
 // 获取要克隆的元素
 this.firstChild = this.wrapper.find('.slide:first');
 // 获取一张图片宽度
 this.Width = this.firstChild.width();
 // 记录图片下标
 this.n = 0;
 // 获取图片个数
 this.len = this.wrapper.find('.slide').length;
 // 获取切换导航按钮
 this.prev = this.element.find('.button-pre');
 this.next = this.element.find('.button-next');
 // 获取分页器
 this.pagination = this.element.find('.pagination');
 // 计时器
 this.timer = null;
 }
 // 初始化
 Banner.prototype.init = function(){
 var self = this; 
 (function () {
  // 克隆第一张图片并添加到元素的边，设置包裹图片父盒子的宽度
  self.wrapper.append(self.firstChild.clone(true));
  self.wrapper.css({ width:self.Width  (self.len + 1)});
  // 生成对应的分页器按钮
  for(var i = 0; i < self.len; i++){
  $('<li></li>').appendTo(self.pagination); 
  }
  // 动态设置分页器的样式
  self.pagination.find('li:first').addClass('active');
  var btnWidth = self.pagination.find('li:first').outerWidth(true)  self.len;
  self.pagination.css({width:btnWidth,marginLeft:-btnWidth / 2})
 })() 
 // 调用所有绑定的事件
 this.nextClick(); 
 this.preClick(); 
 this.btnClick();
 this.autoPlay();
 this.clearPlay(this.element);
 }
 // 切换下一张图片事件
 Banner.prototype.nextClick = function(){
 var self = this;
 this.next.click(function(){
  self.moveNext();
 })
 }
 // 切换图片，也为实现自动播放
 Banner.prototype.moveNext = function() {
 this.n++;
 // 判断重置时机和重置样式
 if (this.n > this.len ) {
  this.n = 1;
  this.wrapper.css({ marginLeft: 0 });
 }
 this.changeBtn(this.n > 3 ? 0 : this.n);
 this.wrapper.s(true,true).animate({ marginLeft: -this.Width  this.n }, this.options.speed)
 }

 // 点击切换上一张图片
 Banner.prototype.preClick = function(){
 var self = this;
 this.prev.click(function () {
  self.n--;
  if (self.n < 0) {
  self.n = self.len - 1;
  self.wrapper.css({ marginLeft: -(self.len)  self.Width });
  }
  self.changeBtn(self.n < 0 ? self.n = 3 : self.n);
  self.wrapper.animate({ marginLeft: -self.Width  self.n }, self.options.speed)
 })
 }
 // 点击分页器切换图片
 Banner.prototype.btnClick = function(){
 var self = this;  
  this.pagination.find('li').click(function () {
  var index = $(this).index();
  self.n = index;
  self.changeBtn(index);
  self.wrapper.animate({ marginLeft: -self.Width  index }, self.options.speed)
 })
 }
 // 动态修改分页器按钮的样式
 Banner.prototype.changeBtn = function(index){
 this.pagination.find('li').eq(index).addClass('active').siblings().removeClass('active');
 }
 // 自动轮播
 Banner.prototype.autoPlay = function(){
 var self = this;
 / 计时器中调用函数是，函数中的this 指向 window， 所以需要使用self.timer = setInterval(function(){
  self.moveNext();
  },2000);
  不能直接使用 self.timer = setInterval(self.moveNext(),2000); 形式 /
 self.timer = setInterval(function(){
  self.moveNext();
 },self.options.interval);
 }
 // 清除自动播放
 Banner.prototype.clearPlay = function(ele){
 var self = this;
 ele.mouseenter(function(){
  clearInterval(self.timer)
 }).mouseleave(function(){
  // 开启自动轮播
  self.timer = setInterval(function(){
  self.moveNext();
  },self.options.interval);
 })
 }
 // jQuery插件实现
$.fn.myBanner = function(params){
 // params 是自定义的配置项
 var banner = new Banner(this,params);
 banner.init();
 // 如果需要链式调用
 return this;
 }
})(jQuery)

<script>
 $(function(){
  $('.mycontainer').myBanner({
  // speed:图片切换速度
  // interval图片切换的时间间隔
  speed:500,
  interval:3000
  });
 })
 

</script>

.mycontainer2{
 width: 300px;
 height:200px;
}
.mycontainer2 img{
 width: 300px;
 height:200px;
}