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

posted @ 2018-01-24 16:24  此夏_唯美  阅读(1781)  评论(0)  编辑  收藏  举报