vue2 商城首頁輪播圖切換

 

home.vue

 1 <template>
 2   <div class="home">
 3     <HomeBanner></HomeBanner>
 4   </div>
 5 </template>
 6 
 7 <script>
 8  import HomeBanner from './HomeBanner.vue'
 9 
10  export default { 11  components: { 12  HomeBanner 13  } 14 } 15 </script>

HomeBanner.vue

分三部分：

HTML部分代碼以下所示：

 1 <template>
 2     <div class="carousel">
 3            <transition-group tag='ul' class="slide" name='image'>
 4                <li v-for='(image,index) in img' :key='index' v-show='index===mark'>
 5                    <a><img :src="image"></a>
 6                </li>
 7            </transition-group>
 8            <div class="bullet">
 9                <span v-for='(item,index) in img.length' :class="{'active':index===mark}" @click='change(index)'></span>
10            </div>
11         </div>
12 </template>

JS部分代碼以下所示

 1 <script>
 2  export default{  3  data: function(){  4     return {  5  mark:0,  6  timer:null,  7  img:[  8           'http://www.ysc66.com/Uploads//banner/2017-10-31/59f7f3a334aeb_1920x500.png',  9           'http://www.ysc66.com/Public/Home/images/infomation/banner.png', 10           'http://www.ysc66.com/Uploads//banner/2017-11-10/5a054c1c9376b_1920x500.png', 11           'http://www.ysc66.com/Uploads//banner/2017-12-25/5a40b29eae795_1920x500.png'
12  ] 13  } 14  }, 15  created(){ 16       this.play() 17  }, 18  methods: { 19  change(i){ 20     this.mark = i 21  }, 22  autoPlay(){ 23     this.mark++
24     if(this.mark ===4){ 25     this.mark = 0
26     return
27  } 28  }, 29  play(){ 30  setInterval(this.autoPlay, 3000) 31  } 32  } 33  } 34 </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小白交流羣，但願可以幫助到你們！