vue实现轮播

<!DOCTYPE html><html><head><meta charset="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1&q

雨中飞蛾

8548人浏览 · 2018-11-17 11:59:54

雨中飞蛾 · 2018-11-17 11:59:54 发布

<!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);
            }
        }
       
    });
}

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^