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