A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

© 流连的岁月 初级黑马   /  2020-2-29 19:28  /  908 人查看  /  6 人回复  /   0 人收藏 转载请遵从CC协议 禁止商业使用本文

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

    });
}

6 个回复

倒序浏览
虚心使人进步,骄傲使人落后
回复 使用道具 举报
好运会眷顾那些已经做好充足准备的人
回复 使用道具 举报
一份耕耘一份收获,冲鸭!
回复 使用道具 举报
除了恐惧和欲望,还有什么可以激励自己长期地努力?
回复 使用道具 举报
加油,一起学习丫
回复 使用道具 举报
仔细看看周围的人,始终有那么一些人,坚定地在向前走着,他们变成闪闪发光的存在,总觉得他们就像是神似的存在这世界上,可是我们不知道他们到底用了多少努力,才换来了这样的一个他们想要的人生。
回复 使用道具 举报
您需要登录后才可以回帖 登录 | 加入黑马