当前位置： 移动技术网 > IT编程>脚本编程>vue.js > 利用vueJs实现图片轮播实例代码

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

2017年12月12日  | 移动技术网IT编程  | 我要评论

constenie,东方卫视跨年演唱会节目单,金沙电子书论坛

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

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

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网