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="data: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小白交流群，希望能够帮助到大家！