之前用jQuery寫過輪播元件，用的jquery動畫實現的圖片滑動效果。這個元件的滑動特效是原生js搭配vue的資料繫結實現的，不依賴其他庫，雖然可以再vue.js中引入swiper,但是引入類庫的最大的缺點就是冗餘程式碼太多，所以還是自己寫一個比較好，簡單扼要。（ps:元件的寬高設定還有有點小bug，子元件中需要改為用js動態修改container的寬高，另外可能還有其他地方有不合理之處，歡迎各位批評指正）

github地址：[email protected]:cainiao222/vueslider-components.git

父元件程式碼：

<template>
 
  <div>
    <slider :img="img" :width="width" :height="height"></slider>
  </div>
</template>
<script>
//  import swiper from 'swiper'
import slider from './slider1.vue'
export default {

    data(){
      return {
        img:[{src:require('../assets/slideShow/pic1.jpg'),
 
name:'hehe1'},
{src:require('../assets/slideShow/pic2.jpg'),name:'hehe2'},
{src:require('../assets/slideShow/pic3.jpg'),name:'hehe3'},
{src:require('../assets/slideShow/pic4.jpg'),name:'hehe4'}
        ],
width:460,
height:250
}
    },
components:{
      slider:slider
    }
  }
</script>

<template>
 
  <div class="box">
    <div @mouseenter="endInterval" @mouseleave="startInterval" class="container">
      <div :style="{width:wrap_width+'px',height:wrap_height+'px',left:offset_left+'px'}" class="slider-wrap">
        <div class='img' v-for="item in slider_des">
          <img :src="item.src" alt="">
        </div>
      </div>
      <div class="bottom">
        <ul class="pointContainer">
          <li @click="changeIndex(index)" :class="{point:true,active:nowIndex===index}" v-for="(point,index) in length"></li>
        </ul>
      </div>
      <div @click="pre" class="click pre">&lt;</div>
      <div @click="next" class="click next">&gt;</div>
    </div>
  </div>
</template>
<script>
export default {
    props:{
      img:{
        type:Array,
default:[]
      },
width:{
        type:Number,
default:460
},
height:{
        type:Number,
default:250
}
    },
mounted(){
      this.startInterval();
},
data(){
      console.log(this.width);
return{
        length:new Array(this.img.length),
nowIndex:0,
wrap_width:this.width*(this.img.length+2),
wrap_height:this.height,
offset_left:-this.width,
isTransition:true,
timer:null,
animateFlag:true,
timerAuto:null
}
    },
computed:{
      slider_des:function () {
        var arr=[];
var arr1=arr.concat(this.img);
arr1.push(this.img[0]);
arr1.unshift(this.img[this.img.length-1]);
return arr1;
}
    },
methods:{
      pre(){
        if(this.nowIndex===0){
          if(!this.animateFlag){
            clearInterval(this.timer);
this.animateFlag=true;
this.offset_left=-(this.length.length)*this.width;
}
          this.animate(-this.width,0,function (that) {
            that.offset_left=-(that.length.length)*that.width;
});
this.nowIndex=this.img.length-1;
return
}else{
          if(!this.animateFlag){
            this.animateFlag=true;
clearInterval(this.timer);
this.offset_left=-(this.nowIndex*this.width);
}
          this.animate(-(this.nowIndex+1)*this.width,-(this.nowIndex*this.width));
}
        this.nowIndex-=1;
},
startInterval(){
        this.timerAuto=setInterval(this.next,2000);
},
endInterval(){
//        console.log("leave");
clearInterval(this.timerAuto);
},
next(){
        if(this.nowIndex===this.length.length-1){
          if(!this.animateFlag){
            this.animateFlag=true;
clearInterval(this.timer);
this.offset_left=-this.width;
}
          this.animate(-(this.length.length)*this.width,-(this.length.length+1)*this.width,function (that) {
            that.offset_left=-that.width;
});
this.nowIndex=0;
return
}else{
          if(!this.animateFlag){
            this.animateFlag=true;
clearInterval(this.timer);
this.offset_left=-(this.nowIndex+2)*this.width;
}
          this.animate(-(this.nowIndex+1)*this.width,-(this.nowIndex+2)*this.width);
this.nowIndex+=1;
}
      },
animate(start,end,fuc){
        var distance=end-start;
var pre_dis=distance/50;
var that=this;
this.timer=setInterval(function () {
          that.animateFlag=false;
if(Math.abs(end-that.offset_left)<=Math.abs(pre_dis)){
            that.offset_left=end;
if(fuc){
              fuc(that);
}
            that.animateFlag=true;
clearInterval(that.timer);
that.timer=null;
return
}
          that.offset_left+=pre_dis;
},1);
},
changeIndex(index){
        clearInterval(this.timer);
this.animate(-(this.nowIndex+1)*this.width,-(index+1)*this.width);
this.nowIndex=index;
}
    }
  }
</script>
<style scoped>
*{
      margin: 0;
list-style: none;
/*height: 0;*/
}
    .box{
      position: relative;
}
    .container{
      width: 460px;
height: 250px;
margin: 0 auto;
border: 1px solid #3bb4f2;
overflow: hidden;
left: 0;
top: 0;
position: absolute;
}

    .slider-wrap{
      /*width: 2760px;*/
      /*height: 250px;*/
position: absolute;
/*left: -460px;*/
      /*overflow: hidden;*/
top: 0;
}

    .transition{
      transition: 0.5s;
}

    .img{
      width: 460px;
height: 250px;
float: left;
display: inline;
}

    img{
      width: 460px;
height: 250px;
/*float: left;*/
}

    .click{
      width: 20px;
background-color: rgba(255,255,255,.3);
color: aliceblue;
font-weight: bold;
position: absolute;
height: 40px;
line-height: 40px;
margin-top: -20px;
top: 50%;
cursor: pointer;
}

    .pre{
      left: 0;
}
    .next{
      right: 0;
}
.bottom{
  position: absolute;
bottom: 0;
width: 100%;
height: 20px;
text-align: center;
}

  .pointContainer{
    height: 20px;
}

  .point{
    display: inline-block;
border: 5px solid #eeeeee;
border-radius: 5px;
line-height: 0;
margin-right: 3px;
}

  .active{
    border: 5px solid #42b983;
}

</style>