<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>
 <!-- 導(dǎo)航按鈕 -->
 <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;
 top: 50%;
 margin-top: -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($){
 // 默認(rèn)設(shè)置
 var defaults = {
 speed:1000,
 interval:2000
 }
 function Banner(ele,options){
 // 獲取元素對(duì)象
 this.element = $(ele);
 // 合并設(shè)置項(xiàng)
 this.options = $.extend({},defaults,options);
 // 獲取包裹圖片的父元素
 this.wrapper = this.element.children().first();
 // 獲取要克隆的元素
 this.firstChild = this.wrapper.find('.slide:first');
 // 獲取一張圖片寬度
 this.Width = this.firstChild.width();
 // 記錄圖片下標(biāo)
 this.n = 0;
 // 獲取圖片個(gè)數(shù)
 this.len = this.wrapper.find('.slide').length;
 // 獲取切換導(dǎo)航按鈕
 this.prev = this.element.find('.button-pre');
 this.next = this.element.find('.button-next');
 // 獲取分頁器
 this.pagination = this.element.find('.pagination');
 // 計(jì)時(shí)器
 this.timer = null;
 }
 // 初始化
 Banner.prototype.init = function(){
 var self = this; 
 (function () {
  // 克隆第一張圖片并添加到元素的最后邊，設(shè)置包裹圖片父盒子的寬度
  self.wrapper.append(self.firstChild.clone(true));
  self.wrapper.css({ width:self.Width * (self.len + 1)});
  // 生成對(duì)應(yīng)的分頁器按鈕
  for(var i = 0; i < self.len; i++){
  $('<li></li>').appendTo(self.pagination); 
  }
  // 動(dòng)態(tài)設(shè)置分頁器的樣式
  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})
 })() 
 // 調(diào)用所有綁定的事件
 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();
 })
 }
 // 切換圖片，同時(shí)也為實(shí)現(xiàn)自動(dòng)播放
 Banner.prototype.moveNext = function() {
 this.n++;
 // 判斷重置時(shí)機(jī)和重置樣式
 if (this.n > this.len ) {
  this.n = 1;
  this.wrapper.css({ marginLeft: 0 });
 }
 this.changeBtn(this.n > 3 ? 0 : this.n);
 this.wrapper.stop(true,true).animate({ marginLeft: -this.Width * this.n }, this.options.speed)
 }

 // 點(diǎn)擊切換上一張圖片
 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)
 })
 }
 // 點(diǎn)擊分頁器切換圖片
 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)
 })
 }
 // 動(dòng)態(tài)修改分頁器按鈕的樣式
 Banner.prototype.changeBtn = function(index){
 this.pagination.find('li').eq(index).addClass('active').siblings().removeClass('active');
 }
 // 自動(dòng)輪播
 Banner.prototype.autoPlay = function(){
 var self = this;
 /* 計(jì)時(shí)器中調(diào)用函數(shù)是，函數(shù)中的this 指向 window， 所以需要使用self.timer = setInterval(function(){
  self.moveNext();
  },2000);
  不能直接使用 self.timer = setInterval(self.moveNext(),2000); 形式 */
 self.timer = setInterval(function(){
  self.moveNext();
 },self.options.interval);
 }
 // 清除自動(dòng)播放
 Banner.prototype.clearPlay = function(ele){
 var self = this;
 ele.mouseenter(function(){
  clearInterval(self.timer)
 }).mouseleave(function(){
  // 再次開啟自動(dòng)輪播
  self.timer = setInterval(function(){
  self.moveNext();
  },self.options.interval);
 })
 }
 // jQuery插件實(shí)現(xiàn)
$.fn.myBanner = function(params){
 // params 是自定義的配置項(xiàng)
 var banner = new Banner(this,params);
 banner.init();
 // 如果需要鏈?zhǔn)秸{(diào)用
 return this;
 }
})(jQuery)

<script>
 $(function(){
  $('.mycontainer').myBanner({
  // speed:圖片切換速度
  // interval：圖片切換的時(shí)間間隔
  speed:500,
  interval:3000
  });
 })
 

</script>

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