黑马程序员技术交流社区

标题: 你是大佬吗? [打印本页]

作者: 流连的岁月 时间: 2020-2-29 19:28
标题: 你是大佬吗?
<!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);
         }
      }

});
}

作者: 小www 时间: 2020-3-6 12:35
虚心使人进步，骄傲使人落后

作者: 黄雨丝丝丝 时间: 2020-3-6 15:04
好运会眷顾那些已经做好充足准备的人

作者: OYJQ33 时间: 2020-3-6 15:46
一份耕耘一份收获，冲鸭！

作者: 柠檬leung不酸 时间: 2020-3-6 16:59
除了恐惧和欲望，还有什么可以激励自己长期地努力？

作者: 柠檬leung不酸 时间: 2020-3-9 12:53
加油，一起学习丫

作者: 柠檬leung不酸 时间: 2020-3-11 16:24
仔细看看周围的人，始终有那么一些人，坚定地在向前走着，他们变成闪闪发光的存在，总觉得他们就像是神似的存在这世界上，可是我们不知道他们到底用了多少努力，才换来了这样的一个他们想要的人生。

欢迎光临黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2