vue2 商城首页轮播图切换

home.vue

<template>
  <div class="home">
    <HomeBanner></HomeBanner>
  </div>
</template>

<script>
  import HomeBanner from './HomeBanner.vue'

  export default {
  components: {
      HomeBanner
    }
}
</script>

HomeBanner.vue

分三部分：

HTML部分代码如下所示：

<template>
    <div class="carousel">
           <transition-group tag='ul' class="slide" name='image'>
               <li v-for='(image,index) in img' :key='index' v-show='index===mark'>
                   <a><img :src="image"></a>
               </li>
           </transition-group>
           <div class="bullet">
               <span v-for='(item,index) in img.length' :class="{'active':index===mark}" @click='change(index)'></span>
           </div>
        </div>
</template>

JS部分代码如下所示

<script>
  export default{
    data: function(){
    return {
      mark:0,
      timer:null,
      img:[
          'http://www.ysc66.com/Uploads//banner/2017-10-31/59f7f3a334aeb_1920x500.png',
          'http://www.ysc66.com/Public/Home/images/infomation/banner.png',
          'http://www.ysc66.com/Uploads//banner/2017-11-10/5a054c1c9376b_1920x500.png',
          'http://www.ysc66.com/Uploads//banner/2017-12-25/5a40b29eae795_1920x500.png'
         ]
       }
 },
    created(){
      this.play()
    },
    methods: {
    change(i){
    this.mark = i
    },
    autoPlay(){
    this.mark++
    if(this.mark ===4){
    this.mark = 0
    return
    }
    },
    play(){
    setInterval(this.autoPlay, 3000)
    }
    }
  }
</script>

CSS部分代码如下所示：

 <style>
    .carousel {
                margin: 0 auto;
                overflow: hidden;
                position: relative;
            }

            .slide {
                width: 100%;
                height: 4rem;
            }

            li {
                position: absolute
            }

            img {
                height: 4rem;
            }

            .bullet {
                width: 100%;
                position: absolute;
                bottom: 10px;
                margin: 0 auto;
                text-align: center;
                z-index: 10;
            }

            span {
                width: 0.3rem;
                height:0.3rem;
                background: white;
                display: inline-block;
                margin-right: 0.2rem;
                border-radius:50%;
            }

            .active {
                background: #900000;
            }

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

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

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

            .image-leave {
                transform: translateX(0)
            }
    </style>

大概步骤就是这样，如若有问题，请留言评论，谢谢合作！！！

                                      

vue小白交流群，希望能够帮助到大家！