VUE开发一个图片轮播的组件示例代码

本人刚学习vue,用vue做了个图片轮播，下面我来记录一下,有需要了解vue开发一个图片轮播的组件的朋友可参考。希望此文章对各位有所帮助。

完成效果图如下：

vue开发的思路主要是数据绑定，代码如下：

<template>
 <div ref="root" style="user-select: none;-webkit-user-select: none;overflow: hidden">
  <div class="sliderpanel"
     :class="{transitionani:ani}"
     :style="{height:height,transform:translatex}">
   <div v-for="item in itemlist" class="verticalcenter picbox" :style="{left:item.x+'px'}">
    <img :style="{width:width,top:top}" :src="item.url" style="min-height: 100%">
   </div>
  </div>
  <div @click="clickleft" class="arrowleft verticalcenter horizacenter">
   <img src="./image/arrow.png" style="transform: rotate(180deg)">
  </div>
  <div @click="clickright" class="arrowright verticalcenter horizacenter">
   <img src="./image/arrow.png">
  </div>
  <div class="arrowbottom verticalcenter horizacenter" >
   <img src="./image/arrow.png" style="transform: rotate(90deg) scale(0.7)">
  </div>
  <div class="sliderbar horizacenter">
   <div v-for="(item,index) in imgarray" @click="clickslidercircle(index)" class="circle" :class="{circleselected:item.selected}">
   </div>
  </div>
 </div>
</template>
<script>
 const screen_width=document.body.clientwidth
 const screen_height=document.body.scrollheight
 var left,center,right
 var selectindex=0
 var count=0
 var second=3//slider 时间间隔
 var timer=null
 var ani=null
 var debugscale=1.0//测试用可调整为小于1
 var direction={left:'left',right:'right'};
 var autodirection=direction.right
 var canclick=true
 export default({
  data:function(){
   return{
    width:'100%',
    height:screen_height+'px',
    top:0,
    ani:true,
    translatex:'scale('+debugscale+') translatex(0px)',
    imgarray:[
     {
      x:0,
      title1:'现在，在您的实验室',
      tilte2:'也可以轻松完成无创dna产前检测',
      title3:'了解详细流程',
      click_url:'http://www.berrygenomics.com/products/nextseq-cn500/cn500test/',
      url:'static/image/1.jpg',
      selected:false,
     },
     {
      x:0,
      title1:'sequel开启新基因组时代',
      tilte2:'覆盖十余种胎儿染色体疾病，体验升级，呵护加倍',
      title3:'了解更多',
      click_url:'http://www.berrygenomics.com/products/nextseq-cn500/cn500test/',
      url:'static/image/2.jpg',
     },
     {
      x:0,
      title1:'brca1/2全外显子基因突变检测',
      tilte2:'也可以轻松完成无创dna产前检测',
      title3:'了解详细流程',
      click_url:'http://www.berrygenomics.com/products/nextseq-cn500/cn500test/',
      url:'static/image/3.jpg',
     },
     {
      x:0,
      title1:'现在，在您的实验室',
      tilte2:'也可以轻松完成无创dna产前检测',
      title3:'了解详细流程',
      click_url:'http://www.berrygenomics.com/products/nextseq-cn500/cn500test/',
      url:'static/image/4.jpg',

     },
     {
      x:0,
      title1:'现在，在您的实验室',
      tilte2:'也可以轻松完成无创dna产前检测',
      title3:'了解详细流程',
      click_url:'http://www.berrygenomics.com/products/nextseq-cn500/cn500test/',
      url:'static/image/5.jpg',
     },
     {
      x:0,
      title1:'现在，在您的实验室',
      tilte2:'也可以轻松完成无创dna产前检测',
      title3:'了解详细流程',
      click_url:'http://www.berrygenomics.com/products/nextseq-cn500/cn500test/',
      url:'static/image/6.jpg',
     },
     {
      x:0,
      title1:'现在，在您的实验室',
      tilte2:'也可以轻松完成无创dna产前检测',
      title3:'了解详细流程',
      click_url:'http://www.berrygenomics.com/products/nextseq-cn500/cn500test/',
      url:'static/image/7.jpg',
     },
     {
      x:0,
      title1:'现在，在您的实验室',
      tilte2:'也可以轻松完成无创dna产前检测',
      title3:'了解详细流程',
      click_url:'http://www.berrygenomics.com/products/nextseq-cn500/cn500test/',
      url:'static/image/8.jpg',
     }
    ],
    itemlist:[]
   }
  },
  mounted:function(){
   ani=this.$refs.root.queryselector('.sliderpanel')
   count=this.imgarray.length
   this.setindex(selectindex)
   //自动滚动切换图片
   this.slideauto(second)
  },
  methods:{
   clickleft:function(){
     if(!canclick) return false
    autodirection=direction.left
    this.slideauto(second)
    this.moveleftani()
    canclick=false
   },
   clickright:function(){
    if(!canclick) return false
    autodirection=direction.right
    this.slideauto(second)
    this.moverightani()
    canclick=false
   },
   slideright:function () {
    selectindex++
    if(selectindex+1>count){
     selectindex=0
    }else if(selectindex<0){
     selectindex=count-1
    }
    this.setindex(selectindex)
   },
   slideleft:function () {
    selectindex--
    if(selectindex+1>count){
     selectindex=0
    }else if(selectindex<0){
     selectindex=count-1
    }
    this.setindex(selectindex)
   },
   clickslidercircle:function (index) {
    this.slideauto(second)
    this.setindexpre(index)
   },
   setindexpre:function (index) {
    if(!canclick) return false
    canclick=false
    if(index==selectindex)return
    var leftindex=index
    var centerindex=selectindex
    var rightindex=index
    for(var i=0;i<count;i++){
     if(i==selectindex){
      this.imgarray[i].selected=true
     }else{
      this.imgarray[i].selected=false
     }
    }
    left=this.imgarray[leftindex]
    center=this.imgarray[centerindex]
    right=this.imgarray[rightindex]
    left=json.parse(json.stringify(left))
    right=json.parse(json.stringify(right))
    left.x=-screen_width
    center.x=0
    right.x=screen_width
    left.index=leftindex
    center.index=centerindex
    right.index=rightindex
    this.itemlist=[left,center,right]
    if(index>selectindex){
     autodirection=direction.right;
      +function(obj){
      obj.anicompted(
       'scale('+debugscale+') translatex('+0+'px)',
       'scale('+debugscale+') translatex('+-screen_width+'px)',
       function(){
        obj.setindex(index)
       })
     }(this)
     //右移
    }else if(index<selectindex){
     //左移
     autodirection=direction.left;
     +function(obj){
      obj.anicompted(
       'scale('+debugscale+') translatex('+0+'px)',
       'scale('+debugscale+') translatex('+screen_width+'px)',
       function(){
        obj.setindex(index)
       })
     }(this)
    }
   },
   setindex:function (index) {
    var leftindex=index-1
    var centerindex=index
    var rightindex=index+1
    if(index<=0){
     index=0
     leftindex=count-1
     centerindex=index
     rightindex=index+1
    }else if(index>=count-1){
     index=count-1
     leftindex=index-1
     centerindex=index
     rightindex=0
    }
    selectindex=index
    for(var i=0;i<count;i++){
      if(i==selectindex){
       this.imgarray[i].selected=true
      }else{
       this.imgarray[i].selected=false
      }
    }
    left=this.imgarray[leftindex]
    center=this.imgarray[centerindex]
    right=this.imgarray[rightindex]
    left.x=-screen_width
    center.x=0
    right.x=screen_width
    left.index=leftindex
    center.index=centerindex
    right.index=rightindex
    this.itemlist=[left,center,right]
   },
   slideauto:function () {
     clearinterval(timer);
     +function (obj) {
      timer=setinterval(function () {
       if(autodirection==direction.left){
        obj.moveleftani()
       }else{
        obj.moverightani()
       }
      },second*1000)
     }(this)
   },
   moveleftani:function(){
     +function(obj){
      obj.anicompted(
       'scale('+debugscale+') translatex('+0+'px)',
       'scale('+debugscale+') translatex('+screen_width+'px)',
       function(){
        obj.slideleft()
       })
     }(this)
   },
   moverightani:function(){
    +function(obj){
      obj.anicompted(
       'scale('+debugscale+') translatex('+0+'px)',
       'scale('+debugscale+') translatex('+-screen_width+'px)',
       function(){
        obj.slideright()
       })
     }(this)
   },
   anicompted:function(fromstr,tostr,callback){
    var handler=null,obj=this
    handler=function(){
     ani.removeeventlistener('webkittransitionend',handler,false)
     callback()
     obj.ani=false
     obj.translatex=fromstr
     canclick=true
    }
    ani.removeeventlistener('webkittransitionend',handler,false)
    ani.addeventlistener('webkittransitionend',handler,false)
    this.ani=true
    this.translatex=tostr
   }
  }

 })

</script>
<style scoped>
 .transitionani{
  transition: all 0.8s cubic-bezier(.23,1,.32,1);
  /*transition: transform 1s;*/
 }
 .arrowleft{
  transition: all 0.4s ease;
  width: 60px;
  height: 60px;
  position: absolute;
  left: 15px;
  top: 50%;
  margin-top: -30px;
  background: rgba(0,0,0,0.6);
  border-radius: 6px;
 }
 .arrowleft:hover{
  background: rgba(0,0,0,0.8);
  transform: scale(1.1);
 }
 .arrowright{
  transition: all 0.4s ease;
  width: 60px;
  height: 60px;
  position: absolute;
  right: 15px;
  top: 50%;
  margin-top: -30px;
  background: rgba(0,0,0,0.6);
  border-radius: 6px;
 }
 .arrowright:hover{
  background: rgba(0,0,0,0.8);
  transform: scale(1.1);
 }
 .sliderbar{
  width:100%;height: auto;position: absolute;bottom: 50px;
 }
 .circle{
  width: 15px;
  height: 15px;
  background: rgba(0,0,0,0.7);
  border-radius: 50%;
  display: table-cell;
  margin-right: 3px;
  transition: all 0.5s ease;
 }
 .circle:hover{
  background: #c7015c;
  transform: scale(1.15);
 }
 .circleselected{
  background: #c7015c;
  transform: scale(1.15);
 }
 .arrowbottom{
  width: 80px;
  height: 50px;
  position: absolute;
  bottom: -15px;
  left: 50%;
  margin-left: -40px;
  background: #c7015c;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  transition: all 0.5s ease-out;
 }
 .arrowbottom:hover{
  transform: translatey(-10px);
  background: deeppink;
 }
 .picbox{
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  overflow: hidden;
  /*transform: scale(0.9);*/
  /*opacity: 0.2;*/
  transition: all 0.45s ease;
 }
 /*@keyframes arrowout-animation {*/
  /*from{*/
   /*transform: translatey(0px);*/
  /*}*/
  /*to{*/
   /*transform: translatey(15px);*/
   /*!*width:200px;*!*/
  /*}*/
 /*}*/
 /*@keyframes arrowin-animation {*/
  /*from{*/
   /*transform: translatey(15px);*/
  /*}*/
  /*to{*/
   /*transform: translatey(0px);*/
   /*!*height: 200px;*!*/
  /*}*/
 /*}*/
 /*.arrowout{*/
  /*animation: arrowout-animation;*/
  /*animation-duration: 0.5s;*/
  /*animation-timing-function: ease-out;*/
  /*animation-fill-mode:forwards;*/
 /*}*/
 /*.arrowin{*/
  /*animation: arrowin-animation;*/
  /*animation-duration: 0.5s;*/
  /*animation-timing-function:ease-out;*/
  /*animation-fill-mode:forwards;*/

 /*}*/
</style>

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