輪播圖

VUE輪播實例　　

https://segmentfault.com/a/1190000008828755       //VUE過分實現輪播圖  

http://www.jq22.com/jquery-info15947    //VUE輪播圖插件

 參考代碼：

<template>
      <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> <img :src="list.image"></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>
</template>
 
<script>
export default {
      data () {
            return {
                  slideList: [
                        { 
                            "image": "../../static/IMG/PublicImg/index2.jpg"
                        },
                        { 
                            "image": "../../static/IMG/PublicImg/index1.jpg"
                        }
                    ],
                    currentIndex: 0,
                    timer: ''
            }
      },
      methods: {
            go() {
                this.timer = setInterval(() => {
                    this.autoPlay()
                }, 3000)
            },
            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
                }
            }
      },
      created() {
          //在DOM加載完成後，下個tick中開始輪播
          this.$nextTick(() => {
              // this.timer = setInterval(() => {
              //     this.autoPlay()
              // }, 2000)
          })
      }
}
</script>

<style>
ul{
      list-style:none;
      padding: 0;
      margin: 0;
}
.carousel-wrap {
  position: relative;
  height: 500px;
  width: 100%;
  overflow: hidden; 
  background-color: #fff;
} 
.slide-ul {
      width: 100%;
      height: 100%;
      padding: 0;
      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;  
}
.carousel-items .active {
      background-color: #02ECE3;
}
.carousel-items span {
    display: inline-block;
    height: 6px;
    width: 30px;
    margin: 0 3px;
    background-color: #b2b2b2;
    cursor: pointer;
  }
</style>