vue实现轮播

<!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">
    <link rel="stylesheet" href="font/iconfont.css">
    <script src="js/vue.js"></script>
    <script src="js/index3.js"></script>
<body>
<!--页面容器-->
  <div class="index-content" id="my">
    <div class="banner">
        <img v-for="(img,index) in imgs" :src="img" v-show="num==index"/>
        <div class="banner-circle">
            <ul>
                <li v-for="(value,index) in imgs" :class="{'selected':num==index}"></li> 
            </ul> 
        </div>
    </div>
</body>
</html>
window.onload = function () {
    //vue实现轮播
    new Vue({
        el: '#my',//挂载元素,说白了就是在id=my的div里使用下面的vue
        data: {//所有的变量、数据都得写在data里
            num:0,
            imgs: [//用数组存放要轮播的图片
                'img/banner1.jpg',
                'img/banner2.jpg',
                'img/banner3.jpg',
                'img/banner4.jpg',
                'img/banner5.jpg'
            ]
        },
        mounted:function(){//mounted是vue实例挂载的事件钩子函数,所以它只会执行一次,之后就是play方法。
           this.play();
        },
        methods:{//vue中存放方法的地方
            autoPlay:function(){//num递增,num等于图片总数时回到第一张,其递增有下面的定时器实现
                const _self=this;
                _self.num++;
                if(_self.num == this.imgs.length){
                    _self.num=0;
                }
            },
            play:function(){//每隔一秒执行autoPlay,使得num递增
                setInterval(this.autoPlay,1000);
            }
        }
       
    });
}

 

阅读更多

没有更多推荐了,返回首页