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

发布日期： 2026-01-12 阅读量： 作者： 用户投稿
本人刚学习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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
上一篇: canvas仿iwatch时钟效果
下一篇: java 实例化类详解及简单实例
VUE开发一个图片轮播的组件示例代码

随便看看

南昌壹佳企网络通信有限公司
