老师，我的图片显示顺序不对

老师，我的图片显示顺序不对

点击第1个按钮，显示第2张图片，第2个按钮显示第3张图片，以此类推......第11个按钮显示第12张图片。点击第12个按钮，没有变化。

我的程序目录如下：

http://img1.sycdn.imooc.com//climg/5e1bcf42096865d702400507.jpg


index.html文件如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
<!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文件如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
body,
h1, h2, nav, button,
div, span
{
    margin: 0;
    padding: 0;
    font-weight: normal;
}
 
body
{
    font-family: "Microsoft YaHei", "微软雅黑";
    background-color: #90B0C5;
}


index.css文件如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
/*标题部分*/
.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文件如下：

1
2
3
4
5
6
7
8
9
10
11
12
$(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文件是在官网下载的，能够正确引入，没有问题。
我学习太差被关起来了 2020-01-13
源自：jQuery入门   3-4 行为层
24
收起

正在回答

登陆购买课程后可参与讨论，去登陆吧

3回答
好帮手慕慕子 回答被采纳获得+3积分 2020-01-13 11:15:39

同学你好，因为index方法获取的是当前元素在所有兄弟元素中的索引值，你的导航多了一个div，所以导致图片与按钮没有对应。

示例：可以打印一下index值，第一个按钮的索引不为0，是1

http://img1.sycdn.imooc.com//climg/5e1be08709b08d6504050061.jpg

http://img1.sycdn.imooc.com//climg/5e1be08c090eb29b02240079.jpg

建议：可以不用去除html结构中div元素，可以将获取的索引值减一即可。

http://img1.sycdn.imooc.com//climg/5e1be0cf09cb2af911750428.jpg

如果我的回答帮助到了你，欢迎采纳，祝学习愉快~

0
收起回答
  • 我学习太差被关起来了 提问者 #1
    原来如此
    2020-01-13 11:42:56
  • 我学习太差被关起来了 提问者 #2
    按钮的class名为gallery__nav__btn，图片的class名为gallery__box__list__item。有什么办法获取到点击哪个按钮，获取对应的哪一张图片呢？
    2020-01-13 21:29:26
好帮手慕慕子 2020-01-14 09:44:06

同学你好，以同学粘贴的代码为例：

http://img1.sycdn.imooc.com//climg/5e1d1b2d09c879a313240884.jpg

点击按钮时，通过$(this).index()获取被点击按钮的索引，然后减去一，得到的值就是图片对应的索引值。即点击按钮获取到对应的图片。

http://img1.sycdn.imooc.com//climg/5e1d1cda09c09abc09100367.jpg

如果我的回答帮助到了你，欢迎采纳，祝学习愉快~

0
收起回答
提问者 我学习太差被关起来了 2020-01-13 10:31:48

我发现问题了：当把HTML元素 <div class="gallery__nav__bar"></div> 删除后，

就能够实现按钮与对应图片正常显示。

看来这里不严谨，有bug。为什么有bug？jQuery的eq方法选择对应的下标为什么在这里会出错？

0
收起回答
问题已解决，确定采纳
还有疑问，暂不采纳

恭喜解决一个难题，获得1积分~

来为老师/同学的回答评分吧

0 星

相似问题

触发图片四种状态的自定义事件打印顺序跟老师的不同
10 0 3
为什么图片前后显示的不一样？
0 0 3
图书的图片不显示
43 0 3
关于图片的相对路径不能显示图片
33 0 7
老师我的gridlayout不显示图片
6 0 3

登录后可查看更多问答，登录/注册

2.组件化网页开发
  • 参与学习           人
  • 提交作业       1121    份
  • 解答问题       14456    个

本阶段在运用JS实现动态网页开发的基础上，带你深入理解企业开发核心思想，完成一个企业级网页的开发，体验前端工程师的成就感。

了解课程

本课精华内容

问答 作业

老师！请教一段代码

37 3

prev+next选择器是否和父子选择器一样呢

22 4

2-11检查

78 1

老师，这样对吗

80 1

提问的同学看这里（慕课网出品）

56 1

查看更多本课问答
请稍等 ...
微信客服

购课补贴
联系客服咨询优惠详情

 帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

 公众号

扫描二维码
关注慕课网微信公众号

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码，添加
你的专属老师
插入代码