秋天是个瓜果飘喷鼻香、带着丰产喜悦的时令；秋天是个充溢童趣的时令；孩子们可以去捉蛐蛐、摘果子，还可以去金黄的原野放鹞子、去树林里捡落叶；当把收罗的落叶拼成一幅幅图案时，就会是世上最美丽的丹青。
本文实例为大家分享了vue实现匀速轮播效果的具体代码，供大家参考，具体内容如下
不多描述了 直接代码吧
<template>
<div>
<div class="box">
<ul class="ullist" @mouseleave="clearTimeout" @mouseenter="beginTimeout">
<li><img src="@/assets/401_images/401.gif" alt="" class="Liwidth"></li>
<li><img src="@/assets/404_images/404.png" alt=""></li>
<li><img src="@/assets/401_images/401.gif" alt=""></li>
<li><img src="@/assets/404_images/404.png" alt=""></li>
<li><img src="@/assets/401_images/401.gif" alt=""></li>
<li><img src="@/assets/404_images/404.png" alt=""></li>
<li><img src="@/assets/401_images/401.gif" alt=""></li>
<li><img src="@/assets/404_images/404.png" alt=""></li>
<li><img src="@/assets/401_images/401.gif" alt=""></li>
</ul>
</div>
</div>
</template>
<script>
export default {
data(){
return{
screenWidth:"',
boxWidth:0,
isClear:0,
timer:null,
left:0,
timerRun:false,
}
},
methods:{
//获取窗口的宽度
getListLeng(){
this.boxWidth = document.getElementsByClassName('box')[0].offsetWidth
var ul = document.getElementsByClassName('ullist')[0]
var length = ul.children.length
ul.style.width=length*230+'px'
this.runTimeout(ul,this.boxWidth,length)
},
//轮播效果
runTimeout(ul,boxWidth,length){
let that = this
this.timer=setInterval(function(){
// move();
that.move(ul,boxWidth,length)
},50)
},
//轮播图走的方法
move(ul,boxWidth,length){
var num = this.left--
var allWidth =length*230-boxWidth
if(Math.abs(num)>allWidth){
ul.style.left=0+'px'
this.left=0
}
ul.style.left=num+'px'
},
//移入
beginTimeout(){
clearInterval(this.timer)
},
//移出
clearTimeout(){
clearInterval(this.timer)
this.timer = null
this.boxWidth = document.getElementsByClassName('box')[0].offsetWidth
let ul = document.getElementsByClassName('ullist')[0]
let length = ul.children.length
ul.style.width=length*230+'px'
this.runTimeout(ul,this.boxWidth,length)
}
},
mounted(){
this.getListLeng()
window.onresize = () => {
return (() => {
this.boxWidth = document.getElementsByClassName('box')[0].offsetWidth
})()
},
getSwiperList().then(res=>{
this.bannerList = res.data
})
},
//页面销毁的时候 关闭定时器
destroyed () {
clearInterval(this.timer)
}
}
</script>
<style lang="scss" scped>
.box{
height:230px;
width:80%;
margin: 200px auto;
position: relative;
overflow: hidden;
ul{
position: absolute;
}
li{
float: left;
height:230px;
width:230px;
img{
height:230px;
width:230px;
}
}
}
</style>
关于vue.js组件的好代码教程，请大家点击专题vue.js组件学习好代码教程进行学习。
本文vue如何实现匀速轮播效果到此结束。刚走出校门的时候，如果能够找到好的单位，好的就业岗位的话，应当先就业去学习一些东西。当你有必须积累的时候，再创业，我相信成功的几率会更大。小编再次感谢大家对我们的支持！
