本文實例為大家分享了vue實現(xiàn)勻速輪播效果的具體代碼，供大家參考，具體內(nèi)容如下

不多描述了 直接代碼吧

<template> <div> <div class='box'> <ul @mouseleave='clearTimeout' @mouseenter='beginTimeout'> <li><img src='http://www.cgvv.com.cn/bcjs/@/assets/401_images/401.gif' alt='' class='Liwidth'></li> <li><img src='http://www.cgvv.com.cn/bcjs/@/assets/404_images/404.png' alt=''></li> <li><img src='http://www.cgvv.com.cn/bcjs/@/assets/401_images/401.gif' alt=''></li> <li><img src='http://www.cgvv.com.cn/bcjs/@/assets/404_images/404.png' alt=''></li> <li><img src='http://www.cgvv.com.cn/bcjs/@/assets/401_images/401.gif' alt=''></li> <li><img src='http://www.cgvv.com.cn/bcjs/@/assets/404_images/404.png' alt=''></li> <li><img src='http://www.cgvv.com.cn/bcjs/@/assets/401_images/401.gif' alt=''></li> <li><img src='http://www.cgvv.com.cn/bcjs/@/assets/404_images/404.png' alt=''></li> <li><img src='http://www.cgvv.com.cn/bcjs/@/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 }) }, //頁面銷毀的時候 關(guān)閉定時器 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>

關(guān)于vue.js組件的教程，請大家點擊專題vue.js組件學習教程進行學習。

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持好吧啦網(wǎng)。