3-5老师为什么第二张图片没有显示？
来源：3-5 编程练习
慕妹2075046
2019-07-30 16:43:37
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>相册</title>
<style>
*{
padding:0;
margin:0;
border:none;
}
body{
height:100%;
background:#93b3c6;
}
span{
display:block;
height:16px;
width:16px;
margin:30px auto 40px;
border-radius:50%;
background:#fff;
}
nav{
position:relative;
display:flex;
width:78.125vw;
margin:0 auto 45px;
justify-content:space-between;
}
nav:before{
position:absolute;
top:20px;
width: 100%;
height: 10px;
background: #fff;
display:block;
content: "";
}
nav>a{
position:relative;
font-size: 20px; padding: 10px; border: 2px solid #5395b4;
text-decoration:none;
background: #fff;
}
div{
overflow:hidden;
width:78.125vw;
height:900px;
background:#fff;
margin:0 auto;
}
img{
width:98%;
height:97%;
margin:14px 14px;
}
</style>
<script type="text/javascript" src="jquery.min.js"></script>
<script>
$(document).ready(function(){
//a标签点击事件
$('a').click(function(){
$('img')//图片轮换
.eq($(this).index())//隐式迭代相当于for循环遍历
.css({'opacity':'1'})//当片显示
.siblings()//获取当前图片的兄弟节点
.css({'opacity':'0'});//兄弟图片为全透明
});
})
</script>
</head>
<body>
<span></span>
<nav>
<a href="#">aaa</a>
<a href="#">aaa</a>
<a href="#">aaa</a>
<a href="#">aaa</a>
<a href="#">aaa</a>
<a href="#">aaa</a>
<a href="#">aaa</a>
<a href="#">aaa</a>
<a href="#">aaa</a>
<a href="#">aaa</a>
</nav>
<div>
<img src="1.jpg"/>
<img src="2.jpg"/>
<img src="1.jpg"/>
<img src="2.jpg"/>
<img src="1.jpg"/>
<img src="2.jpg"/>
<img src="1.jpg"/>
<img src="2.jpg"/>
<img src="1.jpg"/>
<img src="2.jpg"/>
</div>
</script>
</body>
</html>
1回答
-
好帮手慕星星
2019-07-30
同学你好，
因为图片是垂直排列的，在div中看到的永远是第一张图片，其他的超出隐藏了。如果想要在div中显示其他图片，可以将图片设置相对于div定位，全部都叠加在一起，这样最后一张就会显示在最上面。然后再设置第一张图片显示在最上面，参考：
可以重新测试下，祝学习愉快！
0
相似问题
回答 3
回答 1