本文例項為大家分享了vue實現勻速輪播效果的具體程式碼，供大家參考，具體內容如下

不多描述了 直接程式碼吧

<template>
 <div>
  <div class="box">
   <ul class="ullist" @mouseleave="clearTimeout" @mouseenter="beginTimeout">
    <li><img src="@/assets/401_images/401.gif" alt="vue實現勻速輪播效果" class="Liwidth"></li>
    <li><img src="@/assets/404_images/404.png" alt="vue實現勻速輪播效果"></li>
    <li><img src="@/assets/401_images/401.gif" alt="vue實現勻速輪播效果"></li>
    <li><img src="@/assets/404_images/404.png" alt="vue實現勻速輪播效果"></li>
    <li><img src="@/assets/401_images/401.gif" alt="vue實現勻速輪播效果"></li>
    <li><img src="@/assets/404_images/404.png" alt="vue實現勻速輪播效果"></li>
    <li><img src="@/assets/401_images/401.gif" alt="vue實現勻速輪播效果"></li>
    <li><img src="@/assets/404_images/404.png" alt="vue實現勻速輪播效果"></li>
    <li><img src="@/assets/401_images/401.gif" alt="vue實現勻速輪播效果"></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,length)
   },50) 
  },//輪播圖走的方法
  move(ul,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,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>

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。