Vue實現輪播圖效果的代碼怎么寫

今天小編給大家分享一下Vue實現輪播圖效果的代碼怎么寫的相關知識點，內容詳細，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。

Vue 過渡

Vue 的過渡系統是內置的，在元素從 DOM 中插入或移除時自動應用過渡效果。

過渡的實現要在目標元素上使用 transition 屬性，具體實現參考Vue2 過渡

下面例子中我們用到列表過渡，可以先學習一下官方的例子

要同時渲染整個列表，比如使用 v-for，我們需要用到 <transition-group> 組件

Vue 輪播圖

我們先看這樣一個列表

<ul>
 <li v-for="list in slideList">
  <img :src="list.image" :alt="list.desc">
 </li>
</ul>

這個列表要從實例(見文章末尾)中獲取了三張圖片，要使其中的圖片產生輪播，我們需要用 <transition-group> 組件替換其中的 ul 標簽，從而實現過渡組件的功能，完整的組件 DOM 內容如下，下面分段解釋一下

<div class="carousel-wrap" id="carousel">
  // 輪播圖列表
  <transition-group tag="ul" class='slide-ul' name="list">
   <li v-for="(list,index) in slideList" :key="index" v-show="index===currentIndex" @mouseenter="stop" @mouseleave="go">
    <a :href="list.clickUrl" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
     <img :src="list.image" :alt="list.desc">
    </a>
   </li>
  </transition-group>
  // 輪播圖位置指示
  <div class="carousel-items">
   <span v-for="(item,index) in slideList.length" :class="{'active':index===currentIndex}" @mouseover="change(index)"></span>
  </div>
</div>

對應的數據結構如下：

data: {
  slideList: [
    {
      "clickUrl": "#",
      "desc": "nhwc",
      "image": "http://dummyimage.com/1745x492/f1d65b"
    },
    {
      "clickUrl": "#",
      "desc": "hxrj",
      "image": "http://dummyimage.com/1745x492/40b7ea"
    },
    {
      "clickUrl": "#",
      "desc": "rsdh",
      "image": "http://dummyimage.com/1745x492/e3c933"
    }
  ],
  currentIndex: 0,
  timer: ''
},

在使用 v-for 時，應給對應的元素綁定一個 key 屬性，相當于 index 標識，在 <transition-group> 組件中，key 是必須的，這樣一個輪播圖的 DOM 結構就完成了

接下來我們看看輪播函數的實現，再來看組件中的 li 元素

<li v-for="(list,index) in slideList" :key="index">
  <a :href="list.clickUrl" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
   <img :src="list.image" :alt="list.desc">
  </a>
</li>

上面通過 v-for 渲染了 li 列表，并在其中插入了包含可點擊跳轉的圖片，接下來看看如何實現輪播，輪播圖的樣式直接在后面給出大家 sass 代碼，父元素 ul 設置 position: relative;overflow: hidden 后，li 大小設為和父元素相同，absolute 定位固定在父元素中，要讓 li 按照順序顯示，需要用到 v-show 或 v-if 處理，通過 index 值來改變當前顯示的 li ，本例 v-show 綁定條件 index===currentIndex，用定時器改變 currentIndex 實現輪播

<li v-for="(list,index) in slideList" :key="index" v-show="index===currentIndex" @mouseenter="stop" @mouseleave="go">
  <a :href="list.clickUrl" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
   <img :src="list.image" :alt="list.desc">
  </a>
</li>

實例中的方法：

//在下個tick執行等待圖片加載完成后再
this.$nextTick(() => {
 this.timer = setInterval(() => {
  this.autoPlay()
 },4000)
}),
go() {
 this.timer = setInterval(() => {
  this.autoPlay()
 },4000)
},
stop() {
 clearInterval(this.timer)
 this.timer = null
},
change(index) {
 this.currentIndex = index
},
autoPlay() {
 this.currentIndex++
 if (this.currentIndex > this.slideList.length - 1) {
  this.currentIndex = 0
 }
}

DOM 中為每個輪播 li 元素綁定事件 @mouseenter="stop" @mouseleave="go" 事件,使輪播鼠標移入時停止，移出時再次開始。

輪播圖現在位置指示，綁定類名 active 改變顏色，綁定 change() 方法，鼠標移到指示點時跳轉輪播圖

<div class="carousel-items">
 <span v-for="(item,index) in slideList.length" :class="{'active':index===currentIndex}" @mouseover="change(index)"></span>
</div>

sass 樣式代碼

.carousel-wrap {
 position: relative;
 height: 453px;
 width: 100%;
 overflow: hidden;
 // 刪除
 background-color: #fff;
}

.slide-ul {
 width: 100%;
 height: 100%;
 li {
  position: absolute;
  width: 100%;
  height: 100%;
  img {
   width: 100%;
   height: 100%;
  }
 }
}

.carousel-items {
 position: absolute;
 z-index: 10;
 top: 380px;
 width: 100%;
 margin: 0 auto;
 text-align: center;
 font-size: 0;
 span {
  display: inline-block;
  height: 6px;
  width: 30px;
  margin: 0 3px;
  background-color: #b2b2b2;
  cursor: pointer;
 }
 .active {
  background-color: $btn-color;
 }
}

滑動動畫設置，知識點詳見 Vue 教程中的 過渡 css 類名

.list-enter-active {
 transition: all 1s ease;
 transform: translateX(0)
}

.list-leave-active {
 transition: all 1s ease;
 transform: translateX(-100%)
}

.list-enter {
 transform: translateX(100%)
}

.list-leave {
 transform: translateX(0)
}

完整 Vue 實例如下

new Vue({
 el: '#carousel',
 data: {
  slideList: [
    {
      "clickUrl": "#",
      "desc": "nhwc",
      "image": "http://dummyimage.com/1745x492/f1d65b"
    },
    {
      "clickUrl": "#",
      "desc": "hxrj",
      "image": "http://dummyimage.com/1745x492/40b7ea"
    },
    {
      "clickUrl": "#",
      "desc": "rsdh",
      "image": "http://dummyimage.com/1745x492/e3c933"
    }
  ],
  currentIndex: 0,
  timer: ''
 },
 methods: {
  this.$nextTick(() => {
   this.timer = setInterval(() => {
    this.autoPlay()
   },4000)
  }) 
  go() {
   this.timer = setInterval(() => {
    this.autoPlay()
   },4000)
  },
  stop() {
   clearInterval(this.timer)
   this.timer = null
  },
  change(index) {
   this.currentIndex = index
  },
  autoPlay() {
   this.currentIndex++
   if (this.currentIndex > this.slideList.length - 1) {
    this.currentIndex = 0
   }
  }
 }
})

Vue的優點

Vue具體輕量級框架、簡單易學、雙向數據綁定、組件化、數據和結構的分離、虛擬DOM、運行速度快等優勢，Vue中頁面使用的是局部刷新，不用每次跳轉頁面都要請求所有數據和dom，可以大大提升訪問速度和用戶體驗。

以上就是“Vue實現輪播圖效果的代碼怎么寫”這篇文章的所有內容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學習更多的知識，請關注億速云行業資訊頻道。