<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/vue.js" ></script>
<style>
*{
margin: 0;
}
.imgs{
width: 800px;
height: 400px;
margin: 0 auto;
margin-top: 100px;
}
.imgs img{
width: 800px;
height: 400px;
}
</style>
</head>
<body>
<div id="app">
<div class="imgs" v-for="(item,index) in imgList" v-if="index==num">
<img :src="item.img" />
</div>
<div class="btn">
<button @click="prev">上一张</button>
<button @click="next">下一张</button>
</div>
</div>
<script>
new Vue({
el:"#app",
data:{
imgList:[
{img:"img/10.jpg"},
{img:"img/11.jpg"},
{img:"img/12.jpg"},
{img:"img/13.jpg"},
],
num:0
},
methods:{
// 下一张
next:function(){
this.num++
if(this.num>this.imgList.length-1){
this.num=0
}
},
// 上一张
prev:function(){
this.num--
if(this.num<0){
this.num=this.imgList.length-1
}
}
}
})
</script>
</body>
</html>
效果是图片进行上一张下一张轮播切换！
8693
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
