利用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滑动效果等，纯当练手。

来源：CSDN

作者：爱伦。

链接：https://blog.csdn.net/qq_34223398/article/details/72844642