<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>轮播图</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style>
*{
background-color:ghostwhite;
}
.imgs {
width: 480px;
height: 300px;
margin-left: 315px;
margin-top: 100px;
}
.big {
height: 400px;
border: 1px solid olive;
background-color: cornsilk;
}
.left {
margin-left: 270px;
color: crimson;
}
.right {
margin-left: 520px;
color: crimson;
}
.div {
z-index: 20px;
margin-bottom: 200px;
}
</style>
</head>
<body>
<div id="app" class="big">
<img :src="images[currentIndex].imgSrc" alt="" @click="hander" class="imgs" id="myImg">
<br>
<div class="div">
<button @click="left" class="left"><</button>
<button @click="right" class="right">></button>
</div>
</div>
<script>
let app = new Vue({
el: "#app",
data() {
return {
images: [
{ id: 1, imgSrc: "1.jpg" },
{ id: 2, imgSrc: "2.jpg" },
{ id: 3, imgSrc: "3.jpg" },
],
//开始currentIndex设置为 0
currentIndex: 0
}
},
methods: {
// 上一张
left(e) {
console.log(e);
this.currentIndex--;
if (this.currentIndex < 0) {
this.currentIndex = 2;
}
},
// 下一张
right(e) {
console.log(e);
this.currentIndex++;
if (this.currentIndex == 3) {
this.currentIndex = 0;
}
},
hander(e) {
console.log(e.target);
console.log(this);
}
},
})
</script>
</body>
</html>
