使用VUE来实现轮播图的功能开发
源代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script src="https://unpkg.zhimg.com/axios/dist/axios.min.js"></script>
<style>
</style>
</head>
<body>
<div id="app">
<div style="width:500px" >
<img width="600" height="200" v-for="(item, index) in banner" v-show="listIndex === index":key="index":src="item"/>
</div>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
banner: ['https://img0.baidu.com/it/u=3872626532,690754956&fm=253&fmt=auto&app=138&f=JPEG?w=1024&h=320',
'https://img0.baidu.com/it/u=500430250,1313737643&fm=253&fmt=auto&app=138&f=JPEG?w=658&h=267',
'https://img2.baidu.com/it/u=1724313134,4026433148&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=146'],
listIndex:0,
},
methods: {
setTimer: function () {
timer = setInterval(() => {
this.listIndex++;
if (this.listIndex == this.banner.length) {
this.listIndex = 0;
}
}, 2000)
}
},
mounted(){
this.setTimer();
},
created() {
},
})
</script>
</body>
</html>
赞
