功能包括：
可以無縫循環(huán)允扇，也可以不無縫循環(huán)
可以配置左右按鈕和下面的小點點按鈕
下面的小點點按鈕可以點擊
支持手指滑動輪播
可以配置自動輪播,
可以配置小圓點的樣式

后續(xù)：現(xiàn)在只是開發(fā)缠局，必須會有bug ，以后的日子就要用它來上項目進行完善功能啦考润，里面有使用說明

<template>
  <div class="wrap">
    <!-- 圖片 -->
    <ul class="swiper" ref="swiper" @touchstart='startfn($event)' @touchmove='movefn($event)' @touchend='endfn($event)'>
        <li class="item" :style="{'width':w+'px'}" v-if="options.loop">
          <img :src="swiperimg[swiperimg.length-1].src" ref="img" />
        </li>
        <li class="item" v-for="(item,index) in swiperimg" :style="{'width':w+'px'}" :key="index">
          <img :src="item.src" ref="img" />
        </li>
        <li class="item" :style="{'width':w+'px'}" v-if="options.loop">
          <img :src="swiperimg[0].src" ref="img" />
        </li>
    </ul>
    <!--  左右按鈕-->
    <span class="prevbtn" ref="prevbtn" v-show="options.prevnextbtn"  @click='go($event,-1)'>&lt;</span>
    <span class="nextbtn" ref="nextbtn"  v-show="options.prevnextbtn"   @click="go($event,1)">&gt;</span>
    <div class="dotbtn" ref="dotbtn" v-show="options.dotbtn">
        <span v-for="(item,index) in swiperimg" :key="index"  @click='dotclick(index)'>{{index+1}}</span>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      x:-document.documentElement.getBoundingClientRect().width,//ul平移的大小
      w:document.documentElement.getBoundingClientRect().width,//獲取屏幕的寬度
      oUl:'',
      aLi:'',
      iNow:1,
      bReady:true, //限制點擊狭园，當(dāng)動畫正在動時，將不能再點擊
      downX:'',
      disX:'',
      timer:'', //自動播放時間id
      aSpan:'',
      speed:0,
      leng:0,
      dotbtnstyle:{}
    }
  },
  mounted(){
    this.oUl=this.$refs.swiper;
    this.aLi=this.oUl.children;
    this.aSpan=this.$refs.dotbtn.children;
    this.leng=this.aLi.length;
    this.speed=this.options.speed || .5;
    this.dotbtnstyle=this.options.dotbtnstyle || {
      default:`width:20px;height: 20px; margin:0 10px;background: red;`,
      cur:`width:20px;height:20px;background:green;margin:0 10px;`
    }
    this.initswiper();
    this.dotsspanstyle();
  },
  props:['options','swiperimg'],
  methods:{
    initswiper(){
      this.oUl.style.width=this.leng*this.w+'px';
      if(this.options.loop){
        this.oUl.style.WebkitTransform='translateX('+this.x+'px)';
      }else{
        this.iNow=0;
        this.x=0;
        this.aSpan[0].style.background='green'
      }
      if(this.options.autoplay){this.autoplayfn()};
    },
    go(e,step){
      if(!this.options.loop){//沒有循環(huán)的時候
        if(!!e.style){//自動播放時沒有currentTarget //有問題糊治，得修改
          if(this.iNow==this.aSpan.length-1){
            this.iNow=-1;
          }
        }
        if(!!e.currentTarget && e.currentTarget.style.opacity=='0.3'){
          return
        }
      }
      if(this.bready==false)return;
      this.bready=false;
      clearInterval(this.timer)
      this.iNow+=step;
      this.panduaniNow()
      this.dongqilai(1)
    },
    startfn(ev){
       if(this.bready==false)return;
       this.bready=false;
       clearInterval(this.timer)
       this.oUl.style.WebkitTransition='none';
       this.downX=ev.targetTouches[0].pageX;
       this.disX=this.downX-this.x;
    },
    movefn(ev){//需要優(yōu)化唱矛，如果用戶上下滑動了 ev.preventDefault();
      ev.preventDefault();
      if(!this.options.loop && (ev.targetTouches[0].pageX-this.disX)>=100){
            this.oUl.style.WebkitTransform='translateX(100px)';
      }else if(!this.options.loop &&  (ev.targetTouches[0].pageX-this.disX)<=(-this.w*(this.leng-1)-100)){
      }else{
          this.oUl.style.WebkitTransform='translateX('+(ev.targetTouches[0].pageX-this.disX)+'px)';
      }

    },
    endfn(ev){
      this.$refs.swiper.removeEventListener('touchmove',this.movefn)
      var upX=ev.changedTouches[0].pageX;
      if(this.downX==upX){ //如果用戶只是點擊了一下
        this.bready=true;
      }
      if(Math.abs(upX-this.downX)>100){
          this.downX>upX ? this.iNow++ : this.iNow--
          if(!this.options.loop){
            this.iNow==-1 ? this.iNow=0 : ''
            this.iNow==this.leng ? this.iNow=this.leng-1 : ''
          }
          this.panduaniNow()
      }
      this.dongqilai(1)
    },
    tend(){
      this.bready=true;
      this.oUl.removeEventListener('transitionend',this.tend,false);
      if(this.options.loop){
        if(this.iNow==this.leng-1){
            this.iNow=1;
        }
        if(this.iNow==0){
            this.iNow=this.leng-2;
        }
        this.dongqilai(0)
      }else{
        this.dongqilai(1)
      }

    },
    dotclick(index){
      if(!this.options.loop){
        if(index==this.iNow){return} //如果當(dāng)前的顯示和點擊的是同一個，則return
      }
      if(this.options.loop){
        if((index+1)==this.iNow){return} //如果當(dāng)前的顯示和點擊的是同一個俊戳，則return
      }
      if(this.bready==false)return;
      this.bready=false;
      clearInterval(this.timer)
      this.options.loop ?  this.iNow=index+1 : this.iNow=index;
      this.dongqilai(1)
    },
    panduaniNow(){
        if(this.iNow==this.leng){this.iNow=this.leng-1;}
        if(this.iNow==-1){this.iNow=0;}
    },
    dongqilai(type){
      // 如果傳0 表示揖赴，要清掉動畫 ，傳1 表示正常動畫
      if(type==0){
        this.oUl.style.WebkitTransition='none';
      }else{
        this.oUl.style.WebkitTransition=this.speed+'s all ease';

        this.oUl.addEventListener('transitionend',this.tend,false);
        this.dotsspancur()
        this.dotsspanstyle()
      }
      this.x=-this.iNow*this.w;
      this.oUl.style.WebkitTransform='translate3d('+this.x+'px,0,0)';
      if(this.options.autoplay){this.autoplayfn()};
    },
    autoplayfn(){
      clearInterval(this.timer)
      this.timer=setInterval(()=>{
        this.go(this.$refs.nextbtn,1) //自動播放時第一個參數(shù)傳nextbtn這個對象
      },this.options.autoplay)
    },
    dotsspancur(){
      if(!this.options.loop){
          //如果輪播不是循環(huán)時抑胎，當(dāng)運動到第一個燥滑，或者第三個，則為透明阿逃，不能點擊
        if(this.iNow==this.aSpan.length-1){
          this.$refs.nextbtn.style.opacity='.3'
          this.$refs.prevbtn.style.opacity='1'
        }else if( this.iNow==0){
          this.$refs.prevbtn.style.opacity='.3'
          this.$refs.nextbtn.style.opacity='1'
        }else{
          this.$refs.nextbtn.style.opacity='1'
          this.$refs.prevbtn.style.opacity='1'
        }
      }
    },
    dotsspanstyle(){
      for(var i=0;i<this.aSpan.length;i++){
          this.aSpan[i].setAttribute('style',this.dotbtnstyle.default)
      }
      var n;
      n= this.options.loop ? this.iNow-1 :this.iNow
      this.aSpan[(n+this.aSpan.length)%this.aSpan.length].setAttribute('style',this.dotbtnstyle.cur)
    }
  }
}
/*
*author:lipanke
*day:2017-12-06
*update :2017-12-13
*使用方法：
1： import swiper from './Swiper'
2：data里的數(shù)據(jù)
swiperOption: { //基本配置
   autoplay: 500,//自動播放時間
   //dotbtn :true, //是否顯示下面的小點點
   prevnextbtn:true, //是否顯示左右的按鈕
   speed:.2,//運動的速度 以s為單位
   loop:true, //是否無縫滾動
   dotbtnstyle:{  //給小圓點配置樣式铭拧，default是默認的樣式，cur是當(dāng)前顯示的樣式
    default:`width:14px;font-size:12px;height:14px;font-size:12px;background:purple;color:yellow;margin:0 5px;`,
    cur:`width:14px;font-size:12px;height:14px;font-size:12px;background:yellow;color:purple;margin:0 5px;`
  }
},
swiperimg:[
  {
    href:'https://www.baidu.com/',
    src:require('../assets/swiper1.jpg')
  },
  {
    href:'https://www.taobao.com/',
    src:require('../assets/swiper2.jpg')
  }

  3：<swiper :options="swiperOption" :swiperimg="swiperimg"></swiper>
  4：在components里注冊
*/
</script>

<style scoped>
.wrap{overflow: hidden;position: relative;}
.swiper{ }
.swiper:after{content: '';display:block; clear: both;}
.item{float: left;}
.swiper a{display: block;}
.swiper img{width: 100%}
.prevbtn,.nextbtn{position: absolute;top:50%;transform: translateY(-50%);font-size: 30px; color: #fff;z-index: 2;}
.prevbtn{left:20px;}
.nextbtn{right:20px;}
.dotbtn {position: absolute;bottom: 14px;  width: 100%; display: flex;align-items: center; justify-content:center;}
.dotbtn span{border-radius: 50%; color: #fff; display: flex;justify-content: center;align-items: center}
</style>