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

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了利用vueJs实现图片轮播实例代码，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2146字，纯文字阅读大概需要4分钟。

内容图文

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

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

内容总结

以上是互联网集市为您收集整理的利用vueJs实现图片轮播实例代码全部内容，希望文章能够帮你解决利用vueJs实现图片轮播实例代码所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

---