Vue实现轮播

html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>轮播</title>
    <link rel="stylesheet" type="text/css" href="css/common.css">
    <script src="js/vue.js"></script>
    <script src="js/index.js"></script>
    <template id="my-banner">
        <div class="banner">
            <img v-for="(item,index) in data.items" :key="index" :src="item" v-show="index==data.n"/>
            <div class="banner-circle">
                <ul>
                    <li v-for="(item,index) in data.items" :class="{'selected':index==data.n}"
                         @click="curShow(index)"></li> 
                </ul> 
            </div>
        </div>
    </template>
<body>
<!--页面容器-->
  <div class="index-content" id="my">
    <my-banner :data="lists"></my-banner>
    <my-banner :data="lists2"></my-banner>
  </div>

</body>
</html>

 

index.js

window.onload = function(){
    new Vue({
        el:'#my',
        data:{
            n:0,
            lists:{n:0,items: ['img/banner1.jpg',
                                'img/banner2.jpg',
                                'img/banner3.jpg',
                                'img/banner4.jpg',
                                'img/banner5.jpg']
                            },
            lists2:{n:1,items: [
                            'img/banner4.jpg',
                            'img/banner5.jpg']
                        }
        },
        components:{
            'my-banner':{
                template:'#my-banner',
                props:['data'],
                methods:{
                    play:function(){
                        setInterval(this.autoPlay,2000)
                    },
                    autoPlay:function(){
                        this.data.n++;
                        if(this.data.n == this.data.items.length){
                            this.data.n = 0;
                        }
                    },
                    curShow:function(index){
                        this.data.n = index;
                    }
                },
                mounted:function(){   //生命周期
                    this.play();
                }
            }
        },
        
    })
}

 

posted @ 2020-03-04 10:56  bradleydan  阅读(268)  评论(0)    收藏  举报