利用vueJs实现图片轮播

小咪咪 2022-06-15 12:09 276阅读 0赞

最近新学习了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滑动效果等，纯当练手。