本篇文章为大家展示了使用VUE怎么开发一个图片轮播组件，内容简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。
<template>
<div ref="root" >
<div class="sliderPanel"
:class="{transitionAni:ani}"
:>
<div v-for="item in itemList" class="verticalCenter picbox" :>
<img : :src="item.url" >
</div>
</div>
<div @click="clickLeft" class="arrowLeft verticalCenter horizaCenter">
<img src="./image/arrow.png" >
</div>
<div @click="clickRight" class="arrowRight verticalCenter horizaCenter">
<img src="./image/arrow.png">
</div>
<div class="arrowBottom verticalCenter horizaCenter" >
<img src="./image/arrow.png" >
</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>上述内容就是使用VUE怎么开发一个图片轮播组件，你们学到知识或技能了吗？如果还想学到更多技能或者丰富自己的知识储备，欢迎关注亿速云行业资讯频道。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
