利用vueJs实现图片轮播实例代码

最近新学习了vuejs,尝试着用vuejs写了一个简单的图片轮播，便做个简单的记录

以下只贴出carousel.vue代码，其他的省略

<template>
 <div ref="root">
  <div class="sliderPanel">
   <div v-for="(item,index) in imgArray" class="verticalCenter picbox">
    <transition name="slide-fade">
      <img :style="{width:width,top:top}" @mouseover="clearAuto" @mouseout="slideAuto" v-show="index===selectIndex" :src="item.url" style="min-height: 100%">
    </transition>
   </div>
  </div>
  <div @click="clickLeft" @mouseover="clearAuto" @mouseout="slideAuto" class="arrowLeft verticalCenter horizaCenter">
     左移
  </div>
  <div @click="clickRight" @mouseover="clearAuto" @mouseout="slideAuto" class="arrowRight verticalCenter horizaCenter">
    右移
  </div>
  <div class="sliderBar horizaCenter">
   <div v-for="(item,index) in imgArray" @mouseover="clearAuto" @mouseout="slideAuto" @click="setIndex(index)" class="circle" :class="{circleSelected:index===selectIndex}">
   </div>
  </div>
 </div>
</template>
<script>
 const SCREEN_WIDTH=document.body.clientWidth//网页可见区域宽
 const SCREEN_HEIGHT=document.body.scrollHeight//网页正文全文高
 var selectIndex=0
 var timer=null
 export default {
  name: "ErCarousel",
  data() {
    return {
         selectIndex:0,
          width:'100%',
      height:SCREEN_HEIGHT+'px',
      top:0,
      imgArray:[
       {
        url:'/src/components/carousel/image/1.jpg',
       },
       {
        url:'/src/components/carousel/image/2.jpg',
       },
       {
        url:'/src/components/carousel/image/3.jpg',
       }
      ]
    }
  },
  methods:{
     slideAuto:function () {
      var that=this;
    timer=setInterval(function(){
      that.clickRight();
   },3000)
    //clearInterval(timer);
   },
   clearAuto:function(){
    clearInterval(timer);
   },
     clickLeft:function(){
      if(this.selectIndex==0){
        this.selectIndex=this.imgArray.length-1;
      }else{
        this.selectIndex--;
      }
      console.log(this.selectIndex);

   },
   clickRight:function(){
    if(this.selectIndex==this.imgArray.length-1){
        this.selectIndex=0;
      }else{
        this.selectIndex++;
      }
   },
   setIndex:function (index) {
    this.selectIndex=index;
   }
  },
  mounted:function(){
  this.slideAuto();
  }
}

</script>
<style>

整个模块也是分为了template，script，style三个部分，简单的介绍了图片左右切换，以及css滑动效果等，纯当练手。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。