<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue实现轮播图</title>
<style type="text/css">
body{
margin: 100px auto;
background-color: #F7F7F7;
}
#app{
position: relative;
}
#app,#picture{
margin: 0 auto;
width: 52.5rem;
height: 13.75rem;
}
#left,#right{
width: 30px;
height: 50px;
background-color: #A9A9A9;
/* 透明度 */
/* opacity: 0.8; */
position: absolute;
top: 80px;
}
#left{
left: 0;
}
#right{
right: 0;
}
</style>
</head>
<body>
<div id="app">
<img :src="pic" id="picture">
<img :src="left" id="left" v-show="showLeft" @click="pre">
<img :src="right" id="right" v-show="showRight" @click="next">
</div>
<script src="vue/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
const app=new Vue({
el:'#app',
data:{
pic:'images/1.jpeg',
left:'images/left.png',
right:'images/right.png',
showLeft:false,
showRight:true,
startIdx:1,
stopIdx:4,
curIdx:1
},
methods:{
pre(){
console.log('left is click')
if(this.curIdx>this.startIdx){
this.curIdx--
}
this.showLeft=this.curIdx!==this.startIdx
this.showRight=true
this.pic='images/'+this.curIdx+'.jpeg'
},
next(){
if(this.curIdx<this.stopIdx){
this.curIdx++
}
this.showLeft=true
this.showRight=this.curIdx!== this.stopIdx
this.pic='images/'+this.curIdx+'.jpeg'
}
}
})
</script>
</body>
</html>
轮播图设计
最新推荐文章于 2023-10-15 13:10:19 发布