因為之前一直在忙公司的專案，vue這塊就生疏了不少，正好借這個小demo複習下vue的知識。

先來個效果圖：

如圖所示，實現的就是一個間隔2.5s自動向左切換下一張的輪播圖，同時滑鼠移入停止輪播，移出回覆輪播；

而下方按鈕會根據當前圖片自動變紅且可以手動控制當前圖片。

思路：

整個demo分為輪播圖片和控制span兩個部分。

按照前端工程化的需求來說，這兩個部分應該解耦成兩個component最後再匯入頁面比較合理，但由於demo較為簡單，

作為練手就不搞那麼複雜了，對專案有追求【強迫症】的童鞋可以往元件化的目標靠，具體方法參考我之前的博文。

第一步，先寫出整體框架：

<template>
  <div class="slide">
    <div class="slideshow">
      <ul>
        <li v-for="(img, index) in imgArray" :key="index">
          <a href="#">
            <img :src='img'>
          </a>
        </li>
      </ul>
    </div>
    <div class="bar">
      <span v-for="(item, index) in imgArray" :key="index"></span>
    </div>
  </div>
</template>
 

我們使用v-for列表渲染兩個部分，值得注意的是列表渲染最好要提供一個key值，至於為什麼官方文件說得很複雜，

就我所知的是如果不加key值在使用transition-group也就是過渡效果的時候會出現bug，官方給出的建議也是儘可能

在列表渲染的時候加上key值，百利無一害，養成習慣就好。

第二步：

在上一步我們渲染的是一個img陣列，具體：

data () {
    return {
      imgArray: [
        '../static/timg1.jpg',
        '../static/timg2.jpg',
        '../static/timg3.jpg',
        '../static/timg4.jpg'
      ]
    }
  }
 

然後實現輪播的原理就是建立一個變數與當前遍歷的index值比對，若相同則顯示，否則隱藏；

同時下方按鈕index若也與變數相同則當前按鈕變為活躍狀態即背景變紅。

<template>
  <div class="slide">
    <div class="slideshow">
      <ul>
        <li v-for="(img, index) in imgArray" v-show="index===mark" :key="index">
          <a href="#">
            <img :src='img'>
          </a>
        </li>
      </ul>
    </div>
    <div class="bar">
      <span v-for="(item, index) in imgArray" :class="{ 'active':index===mark }" :key="index"></span>
    </div>
  </div>
</template>
 

第三步：

建立定時器，每隔2.5s給變數mark+1，掛載到鉤子函式created：

export default {
  data () {
    return {
      mark: 0, //比對圖片索引的變數
      imgArray: [
        '../static/timg1.jpg',
        '../static/timg2.jpg',
        '../static/timg3.jpg',
        '../static/timg4.jpg'
      ]
    }
  },
  methods: {
    autoPlay () {
      this.mark++;
      if (this.mark === 4) { //當遍歷到最後一張圖片置零
        this.mark = 0
      }
    },
    play () {
      setInterval(this.autoPlay, 2500)
    },
    change (i) {
      this.mark = i
    }
  },
  created () {
    this.play()
  }
}
</script>

第四步：

加上css檔案，出現基本的效果。

<style>
  * {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .slide {
    width: 1024px;
    height: 320px;
    margin: 0 auto;
    margin-top: 50px;
    overflow: hidden;
    position: relative;
  }
  .slideshow {
    width: 1024px;
    height: 320px;
  }
  li {
    position: absolute;
  }
  img {
    width: 1024px;
    height: 320px;
  }
  .bar {
    position: absolute;
    width: 100%;
    bottom: 10px;
    margin: 0 auto;
    z-index: 10;
    text-align: center;
  }
  .bar span {
    width: 20px;
    height: 5px;
    border: 1px solid;
    background: white;
    display: inline-block;
    margin-right: 10px;
  }
  .active {
    background: red !important;
  }
</style>

現在我們得到的效果還是每隔一段時間圖片突然變成另外一張，使用者體驗很差，達不到輪播的效果。

所以我們得加上過渡效果。

html：

<transition-group tag="ul" name="image">
        <li v-for="(img, index) in imgArray" v-show="index===mark" :key="index">
          <a href="#">
            <img :src='img'>
          </a>
        </li>
      </transition-group>

.image-enter-active {
    transform: translateX(0);
    transition: all 1.5s ease;
  }
  .image-leave-active {
    transform: translateX(-100%);
    transition: all 1.5s ease;
  }
  .image-enter {
    transform: translateX(100%);
  }
  .image-leave {
    transform: translateX(0);
  }

這裡因為我們是給一個渲染列表加上過渡效果所以要使用transition-group而不是單元素的transition，否則會報錯。

另外就是記得給transition-group加上tag="ul"屬性，不然就會被預設渲染成span了。

css部分需要關聯name屬性值作為字首。

第六步：

給下方按鈕增加切換圖片的點選事件。

最後我們再加上移入/移出實現關閉/開啟定時器效果，即使用者滑鼠停留當前圖片停止滾動，移出則繼續。

<template>
  <div class="slide" v-on:mouseover="stop()" v-on:mouseout="move()">
    <div class="slideshow">
      <transition-group tag="ul" name="image">
        <li v-for="(img, index) in imgArray" v-show="index===mark" :key="index">
          <a href="#">
            <img :src='img'>
          </a>
        </li>
      </transition-group>
    </div>
    <div class="bullet">
      <span v-for="(item, index) in imgArray" :class="{ 'active':index===mark }"
      @click="change(index)" :key="index"></span>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      timer: null, //定時器
      mark: 0, //比對圖片索引的變數
      imgArray: [
        '../static/timg1.jpg',
        '../static/timg2.jpg',
        '../static/timg3.jpg',
        '../static/timg4.jpg'
      ]
    }
  },
  methods: {
    autoPlay () {
      this.mark++;
      if (this.mark === 4) {
        this.mark = 0
      }
    },
    play () {
      this.timer = setInterval(this.autoPlay, 2500)
    },
    change (i) {
      this.mark = i
    },
    stop () {
      clearInterval(this.timer)
    },
    move () {
      this.timer = setInterval(this.autoPlay, 2500)
    }
  },
  created () {
    this.play()
  }
}
</script>

問題在於vue函式裡設定變數很不可取，存在定義域的問題，開啟定時器跟關閉定時器是兩個函式，不能共用一個變數。

後來靈機一動，想到不如把變數寫在data裡面？

一試，成功！

至此，輪播圖的功能基本實現。

當然，專案做的比較簡陋也存在一些bug，如當一個切換動畫未完成前點選另一個按鈕會出現神奇的交錯現象，由於時間關係還未解決，

希望各位看官能提出寶貴的建議！