vue简单轮播图效果

html

<div class="carousel-wrap" id="carousel">
          <transition-group tag="ul" class='slide-ul' name="list">
              <li v-for="(list,index) in imgArray" :key="index" v-show="index===currentIndex" @mouseenter="stop" @mouseleave="go">
                  <img :src="list">
              </li>
          </transition-group>
          <div class="carousel-items">
              <span v-for="(item,index) in imgArray.length" :class="{'active':index===currentIndex}" @mouseover="change(index)"></span>
          </div>
</div>

js数据

data() {
    return {
      imgArray: [ 
        require(`../assets/lunbo.png`),
        require(`../assets/banner-fill.jpg`)//直接写路径图片出不来
      ],
      currentIndex: 0,
      timer: ''
    };
  }

方法

methods: {
    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.imgArray.length-1) {
            this.currentIndex = 0
        }
    }
}，
created() {
   this.$nextTick(() => {
        this.timer = setInterval(() => {
             this.autoPlay()
           }, 4000)
         })
       
}

css

.carousel-wrap {
   height: 224px;
   width: 100%;
   overflow: hidden;
   background-color: #fff;
}
.carousel-wrap img{
  width: 100%;
  height: 100%;
}
.slide-ul {
  position: relative;
  width: 100%;
  height: 100%;
}
.slide-ul li {
  position: absolute;
  width: 100%;
  height: 100%;
}
.carousel-items {
  position: absolute;
  z-index: 10;
  top: 320px;
  width: 100%;
  margin: 0 auto;
  text-align: center;
  font-size: 0;
}
.carousel-items span {
  display: inline-block;
  height: 6px;
  width: 30px;
  margin: 0 3px;
  background-color: #b2b2b2;
  cursor: pointer;
}
.carousel-items .active {
  background-color: orange;
}
.list-enter-to {
  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)
}

代码是网上各种地方找来改的，用来拯救快秃还没用的脑袋