原创文章

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

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

 template 
 div ref="root" 
 div 
 div v-for="(item,index) in imgArray" 
 transition name="slide-fade" 
 img : @mouseover="clearAuto" @mouseout="slideAuto" v-show="index===selectIndex" :src="item.url" 
 /transition 
 /div 
 /div 
 div @click="clickLeft" @mouseover="clearAuto" @mouseout="slideAuto" 
 /div 
 div @click="clickRight" @mouseover="clearAuto" @mouseout="slideAuto" 
 /div 
 div 
 div v-for="(item,index) in imgArray" @mouseover="clearAuto" @mouseout="slideAuto" @click="setIndex(index)" : 
 /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:'/ponents/carousel/image/1.jpg', 
 url:'/ponents/carousel/image/2.jpg', 
 url:'/ponents/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滑动效果等，纯当练手。

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