本人刚学习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://pted: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); } .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; transition: all 0.45s ease; } /*!*width:200px;*!*/ /*!*height: 200px;*!*/ </style>

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