老师，我的图片显示顺序不对
点击第1个按钮，显示第2张图片，第2个按钮显示第3张图片，以此类推......第11个按钮显示第12张图片。点击第12个按钮，没有变化。
我的程序目录如下：
index.html文件如下：
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>his demo</title> <meta charset="UTF-8"> <meta name="renderer" content="webkit"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <link type="text/css" rel="stylesheet" href="css/base.css"> <link type="text/css" rel="stylesheet" href="css/index.css"> </head> <body> <!-- 标题部分 --> <h1 class="heading">云南旅游相册</h1> <!-- 白色圆圈 --> <div class="circle"></div> <!-- 相册部分 --> <div class="gallery"> <!-- 相册导航栏 --> <nav class="gallery__nav"> <!-- 12个导航按钮 --> <div class="gallery__nav__bar"></div> <button class="gallery__nav__btn">泸沽湖</button> <button class="gallery__nav__btn">丽江古城</button> <button class="gallery__nav__btn">茶马古道</button> <button class="gallery__nav__btn">就这家·云逸客栈</button> <button class="gallery__nav__btn">西双版纳</button> <button class="gallery__nav__btn">云南红酒庄</button> <button class="gallery__nav__btn">轿子雪山</button> <button class="gallery__nav__btn">普者黑</button> <button class="gallery__nav__btn">海埂大坝</button> <button class="gallery__nav__btn">玉龙湾</button> <button class="gallery__nav__btn">昆明郊野公园</button> <button class="gallery__nav__btn">欧洲风琴小镇</button> </nav> <!-- 相册盒子 --> <div class="gallery__box"> <!-- 相册列表 --> <div class="gallery__box__list"> <!-- 12张图片 --> <img class="gallery__box__list__item gallery__box__list__item-current" src="img/0.jpg"> <img class="gallery__box__list__item" src="img/1.jpg"> <img class="gallery__box__list__item" src="img/2.jpg"> <img class="gallery__box__list__item" src="img/3.jpg"> <img class="gallery__box__list__item" src="img/4.jpg"> <img class="gallery__box__list__item" src="img/5.jpg"> <img class="gallery__box__list__item" src="img/6.jpg"> <img class="gallery__box__list__item" src="img/7.jpg"> <img class="gallery__box__list__item" src="img/8.jpg"> <img class="gallery__box__list__item" src="img/9.jpg"> <img class="gallery__box__list__item" src="img/10.jpg"> <img class="gallery__box__list__item" src="img/11.jpg"> </div> </div> </div> <script type="text/javascript" src="../../jquery/jquery-3.4.1.min.js"></script> <script type="text/javascript" src="js/index.js"></script> </body> </html>
base.css文件如下：
body,
h1, h2, nav, button,
div, span
{
margin: 0;
padding: 0;
font-weight: normal;
}
body
{
font-family: "Microsoft YaHei", "微软雅黑";
background-color: #90B0C5;
}index.css文件如下：
/*标题部分*/
.heading
{
margin: 20px auto;
width: 240px;
height: 40px;
line-height: 40px;
font-size: 26px;
text-align: center;
color: #F28;
}
/*白色圆圈*/
.circle
{
margin: auto;
box-shadow: 0 0 0 2px rgba(100, 100, 100, .4);
border-radius: 50%;
width: 14px;
height: 14px;
background-color: #FFF;
}
/*相册部分*/
.gallery
{
margin: 20px auto;
width: 1340px;
text-align: center;
}
/*相册导航栏*/
.gallery__nav
{
overflow: hidden;
position: relative;
display: flex; /*弹性盒子模型*/
justify-content: space-between;
width: 1340px;
height: 40px;
line-height: 40px;
}
/*相册导航按钮的长方条*/
.gallery__nav__bar
{
position: absolute;
left: 0;
top: 14px;
border-top: 1px solid #666;
border-bottom: 1px solid #666;
width: 100%;
height: 10px;
background-color: #FFF;
z-index: 0;
}
/*相册导航按钮*/
.gallery__nav__btn
{
float: left;
border: 1px solid #4682B4;
padding: 0 10px;
height: 100%;
font-size: 16px;
color: #4682B4;
z-index: 1;
}
/*相册导航按钮的鼠标悬停效果*/
.gallery__nav__btn:hover
{
font-weight: bold;
cursor: pointer;
}
.gallery__nav__btn:nth-of-type(4n):hover
{
color: #F35;
}
.gallery__nav__btn:nth-of-type(4n+1):hover
{
color: #1E90FF;
}
.gallery__nav__btn:nth-of-type(4n+2):hover
{
color: #F80;
}
.gallery__nav__btn:nth-of-type(4n+3):hover
{
color: #3D3;
}
/*相册盒子*/
.gallery__box
{
border: 1px solid #4682B4;
box-shadow: 0 0 2px 4px rgba(100, 100, 100, .4);
margin: 26px auto 10px;
padding: 10px;
width: 1280px;
height: 640px;
background-color: #FFF;
}
/*相册列表*/
.gallery__box__list
{
position: relative;
width: 1280px;
height: 640px;
}
/*相册图片*/
/*这里的每张图片必须都位于相同的位置，不能设置浮动*/
.gallery__box__list__item
{
position: absolute;
left: 0;
top: 0;
width: 1280px;
height: 640px;
opacity: 0; /*透明度0*/
transition: all .8s;
}
/*当前图片：透明度1*/
.gallery__box__list__item-current
{
opacity: 1;
}index.js文件如下：
$(document).ready(function()
{
// 对每个按钮绑定点击事件
// 按钮的class名为gallery__nav__btn
$(".gallery__nav__btn").click(function()
{
// 图片的class名为gallery__box__list__item
// 若是当前显示的图片，则为其class名添加gallery__box__list__item-current
// 其余兄弟元素则移除class名gallery__box__list__item-current
$(".gallery__box__list__item").eq($(this).index()).addClass("gallery__box__list__item-current").siblings().removeClass("gallery__box__list__item-current");
});
});jQuery文件是在官网下载的，能够正确引入，没有问题。
24
收起
正在回答
3回答
同学你好，因为index方法获取的是当前元素在所有兄弟元素中的索引值，你的导航多了一个div，所以导致图片与按钮没有对应。
示例：可以打印一下index值，第一个按钮的索引不为0，是1
建议：可以不用去除html结构中div元素，可以将获取的索引值减一即可。
如果我的回答帮助到了你，欢迎采纳，祝学习愉快~
我学习太差被关起来了
2020-01-13 10:31:48
我发现问题了：当把HTML元素 <div class="gallery__nav__bar"></div> 删除后，
就能够实现按钮与对应图片正常显示。
看来这里不严谨，有bug。为什么有bug？jQuery的eq方法选择对应的下标为什么在这里会出错？
相似问题
触发图片四种状态的自定义事件打印顺序跟老师的不同
10
0
3
为什么图片前后显示的不一样？
0
0
3
关于图片的相对路径不能显示图片
33
0
7
图书的图片不显示
43
0
3
老师我的gridlayout不显示图片
6
0
3
登录后可查看更多问答，登录/注册
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星