Flask接口签名sign原理与实例代码浅析
231
2023-06-05
VUE开发一个图片轮播的组件示例代码
本人刚学习vue,用vue做了个图片轮播,下面我来记录一下,有需要了解VUE开发一个图片轮播的组件的朋友可参考。希望此文章对各位有所帮助。
完成效果图如下:
vue开发的思路主要是数据绑定,代码如下:
:class="{transitionAni:ani}"
:style="{height:height,transform:translateX}">
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://berrygenomics.com/products/nextseq-cn500/cn500test/',
url:'static/image/1.jpg',
selected:false,
},
{
x:0,
title1:'Sequel开启新基因组时代',
tilte2:'覆盖十余种胎儿染色体疾病,体验升级,呵护加倍',
title3:'了解更多',
click_url:'http://berrygenomics.com/products/nextseq-cn500/cn500test/',
url:'static/image/2.jpg',
},
{
x:0,
title1:'BRCA1/2全外显子基因突变检测',
tilte2:'也可以轻松完成无创DNA产前检测',
title3:'了解详细流程',
click_url:'http://berrygenomics.com/products/nextseq-cn500/cn500test/',
url:'static/image/3.jpg',
},
{
x:0,
title1:'现在,在您的实验室',
tilte2:'也可以轻松完成无创DNA产前检测',
title3:'了解详细流程',
click_url:'http://berrygenomics.com/products/nextseq-cn500/cn500test/',
url:'static/image/4.jpg',
},
{
x:0,
title1:'现在,在您的实验室',
tilte2:'也可以轻松完成无创DNA产前检测',
title3:'了解详细流程',
click_url:'http://berrygenomics.com/products/nextseq-cn500/cn500test/',
url:'static/image/5.jpg',
},
{
x:0,
title1:'现在,在您的实验室',
tilte2:'也可以轻松完成无创DNA产前检测',
title3:'了解详细流程',
click_url:'http://berrygenomics.com/products/nextseq-cn500/cn500test/',
url:'static/image/6.jpg',
},
{
x:0,
title1:'现在,在您的实验室',
tilte2:'也可以轻松完成无创DNA产前检测',
title3:'了解详细流程',
click_url:'http://berrygenomics.com/products/nextseq-cn500/cn500test/',
url:'static/image/7.jpg',
},
{
x:0,
title1:'现在,在您的实验室',
tilte2:'也可以轻松完成无创DNA产前检测',
title3:'了解详细流程',
click_url:'http://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 if(i==selectIndex){ this.imgArray[i].selected=true }else{ this.imgArray[i].selected=false } } left=this.http://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 //左移 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 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 } } }) .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; UrFdMCsh /*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;*/ /*}*/
版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。
发表评论
暂时没有评论,来抢沙发吧~