<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="js/vue.js"></script>
<style type="text/css">
.myswiper{
width:500px;
height:500px;
position: absolute;
margin: auto;
top:0;
right:0;
left:0;
bottom: 0;
border:1px solid blue;
}
.myswiper img{
width:300px;
height:300px;
position: absolute;
margin: auto;
top:0;
right:0;
left:0;
bottom: 0;
}
</style>
</head>
<body>
<div id="app">
<lunbo :array="array"></lunbo>
</div>
<script type="text/javascript">
// 全局组件的写法
var obj={
template:`
<div class="myswiper">
<img :src="array[currentIndex]"/>
</div>
`,
props:{
// 父传子过来的图片数组
array:Array
},
data:function(){
return {
// 图片数组索引默认值
currentIndex:0
}
},
// 当组件加载完后,自动执行图片轮播函数
// mounted 生命周期函数,当元素和数据渲染完网页之后,会自动执行该函数
mounted(){
var that = this;
console.log(that.array)
setInterval(function(){
console.log(1)
if(that.currentIndex==that.array.length-1){
that.currentIndex = 0;
}
else{
that.currentIndex = that.currentIndex +1;
}
},2000)
}
}
var app = new Vue({
el:"#app",
data:{// 图片的数组变量
array:['img/1.jpg','img/2.jpg','img/3.jpg','img/4.jpg','img/5.jpg','img/6.jpg']
},
components:{
"lunbo":obj
}
})
</script>
</body>
</html>
图片轮播组件
最新推荐文章于 2024-06-18 11:56:32 发布