為什么我按數字按鈕只能實作一次圖片跳轉？怎么把圖片和按鈕對應起來？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>輪播圖切換效果</title>
<style type="text/css">
.banner {
position: relative;
}
.bannerImg {
position: relative;
height: 360px;
}
.bannerImg span {
/* 設定圖片定位 */
position: absolute;
top: 0;
left: 0;
}
.bannerBtn {
width: 200px;
position: absolute;
left: 30%;
bottom: -20px;
text-align: center;
}
.bannerBtn li {
list-style: none;
border-radius: 50%;
float: left;
}
.bannerBtn li a {
/* 設定按鈕樣式 */
display: block;
width: 20px;
height: 20px;
border-radius: 50%;
margin: 5px;
color: #160303;
font-weight: bolder;
text-decoration: none;
}
</style>
<script src="https://bbs.csdn.net/topics/js/vue.js"></script>
</head>
<body>
<div id="box">
<div class="banner">
<!--切換的圖片-->
<div class="bannerImg">
<span v-for="(v,i) in banners" :key="i">
<img width="700" :src="https://bbs.csdn.net/topics/banners[currentIndex].imgSrc" alt="">
</span>
</div>
<!--切換的小按鈕-->
<ul class="bannerBtn">
<li v-for="num in 3">
<a href="javascript:;" class="aBtn" @click="change(num)">{{num}}</a>
</li>
</ul>
</div>
</div>
<script type="text/javascript">
//創建根實體
var vm = new Vue({
el: '#box',
data(){
return{
banners:[
{id:1,imgSrc:"img/ad1.png"},
{id:2,imgSrc:"img/ad2.png"},
{id:3,imgSrc:"img/ad3.png"},
],
currentIndex:0
}
},
methods:{
change(){
if (this.currentIndex == 3){
this.currentIndex = 0;
}
if (this.currentIndex == 0){
this.currentIndex = 1;
}
}
}
});
</script>
</body>
</html>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/226780.html
標籤：JavaScript
上一篇：node.js爬取網站圖片報錯