老师，我有一个问题
来源：3-4 行为层
weibo_慕婉清1565219
2020-03-27 10:11:34
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
*{margin:0;padding:0;border:none;}
html,body{height:100%;background:#93b3c6;overflow:hidden;}
span{display:block;width:14px;height:14px;margin:20px auto 30px;border-radius:50%;background:#fff;}
nav{position:relative;display:flex;width:78.125vw;margin:0 auto 35px;justify-content:space-between;}
nav:before{position:absolute;top:15px;width:100%;height:10px;background:#fff;display:block;content:"";}
nav>a{position:relative;font-size:10px;padding:10px;border:2px solid #5395b4;color:#255d7e;text-decoration:none;background:#fff;}
div{position:relative;overflow:hidden;width:78.125vw;height:75vh;margin:0 auto;background:#fff;box-shadow:0 0 30px 0 rgba(8,1,3,.3);}
div>img{position:absolute;top:0;right:0;bottom:0;left:0;margin:auto;width:98%;height:96%;}
</style>
</head>
<body>
<span></span>
<nav>
<a href="#">泸沽湖</a>
<a href="#">丽江古镇</a>
<a href="#">茶马古道</a>
<a href="#">就这家云逸客栈</a>
<a href="#">西双版纳</a>
<a href="#">云南红酒庄</a>
<a href="#">轿子雪山</a>
<a href="#">普者黑</a>
<a href="#">海埂大坝</a>
<a href="#">玉龙湾</a>
<a href="#">昆明郊野公园</a>
<a href="#">欧洲风琴小镇</a>
</nav>
<div>
<img src="images/1.jpg" alt="">
<img src="images/2.jpg" alt="">
<img src="images/3.jpg" alt="">
<img src="images/4.jpg" alt="">
<img src="images/5.jpg" alt="">
<img src="images/6.jpg" alt="">
<img src="images/7.jpg" alt="">
<img src="images/8.jpg" alt="">
<img src="images/9.jpg" alt="">
<img src="images/10.jpg" alt="">
<img src="images/11.jpg" alt="">
<img src="images/12.jpg" alt="">
</div>
<script>
var a = document.getElementsByTagName("a"),
img = document.getElementsByTagName("img"),
index = 0;
//图片出现消失
function changeImg(){
for (var i = 0; i < img.length; i++) {
img[i].style.opacity = "0";
}
img[index].style.opacity = "1";
}
//点击导航切换
for (var j = 0; j < a.length; j++) {
a[j].setAttribute("data-id",i);
a[j].onclick = function(){
index = this.getAttribute("data-id");
changeImg();
}
}
</script>
</body>
</html>
请老师帮我看看，我这个不能实现的原因，谢谢老师
2回答
-
同学你好，第二个for循环中变量是j不是i，所以会有问题。修改之后就正确了
自己再测试下，祝学习愉快！
0 -
慕粉1905369247
2020-03-27
0
相似问题