点击切换无法实现切换功能

点击切换无法实现切换功能

相关截图：

https://img1.sycdn.imooc.com//climg/626015f70970924f25601600.jpg

相关截图：

https://img1.sycdn.imooc.com//climg/6260161a098f435225601600.jpg

相关代码：

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
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>长沙理工大学官网</title>
    <link rel="stylesheet" href="./CSS/01-header.css">
    <link rel="stylesheet" href="./CSS/02-banner.css">
    <link rel="stylesheet" href="./CSS/base.css">
    <link rel="stylesheet" href="./CSS/common.css">
    <link rel="stylesheet" href="./js/index.js">
    <link rel="stylesheet" href="./font/iconfont.css">
    <link rel="stylesheet" href="./font2/iconfont.css">
</head>
 
<body>
    <!--头部区域开始-->
    <div id="header" class="bgfff">
        <div class="nav-box">
            <div style="text-align: center">
                <h1 class="fl">
                    <a href="index.html">logo</a>
                </h1>
            </div>
            <ul class="item-box fl">
                <li><a href="#">学习</a></li>
                <li><a href="#">活动</a></li>
                <li><a href="#">精品课</a></li>
                <li><a href="#">资源中心</a></li>
                <li><a href="#">课程联盟</a></li>
                <li><a href="#">虚拟科研室</a></li>
                <img src="./images/new.png" alt="">
            </ul>
 
            <div class="search fl">
                <div class="search-area">
                    <input type="text" placeholder="播客">
                    <span class="iconfont icon-sousuo"></span>
                </div>
            </div>
 
            <div class="login-area fr">
                <a href="#">登录</a> |
                <a href="#">注册</a>
                <a href="#" class="shop-cart">
                    <span class="iconfont icon-kecheng1"></span>
                    <span>我的课程</span>
                </a>
                <span class="cart-num">7</span>
            </div>
        </div>
    </div>
    <!--头部区域结束-->
 
    <!--课程轮播图区域开始-->
    <div id="banner">
        <div class="banner-box w">
            <div class="g-banner">
                <div class="course-list fl">
                    <ul>
                        <li>
                            <span class="title">城南学院</span>
                            <span class="sub-title"></span>
                            <span class="iconfont icon-yousanjiao"></span>
                        </li>
                        <li>
                            <span class="title">土木工程学院</span>
                            <span class="sub-title"></span>
                            <span class="iconfont icon-yousanjiao"></span>
                        </li>
                        <li>
                            <span class="title">经济与管理学院</span>
                            <span class="sub-title"></span>
                            <span class="iconfont icon-yousanjiao"></span>
                        </li>
                        <li>
                            <span class="title">水利与环境工程学院</span>
                            <span class="sub-title"></span>
                            <span class="iconfont icon-yousanjiao"></span>
                        </li>
                        <li>
                            <span class="title">电气与信息工程学院</span>
                            <span class="sub-title"></span>
                            <span class="iconfont icon-yousanjiao"></span>
                        </li>
                        <li>
                            <span class="title">计算机与通信工程学院</span>
                            <span class="sub-title"></span>
                            <span class="iconfont icon-yousanjiao"></span>
                        </li>
                        <li>
                            <span class="title">更多学院</span>
                            <span class="sub-title"></span>
                            <span class="iconfont icon-yousanjiao"></span>
                        </li>
                    </ul>
 
                </div>
                <div class="swiper fr">
                    <!--大图片区域-->
                    <a href="#" target="_self"> </a>
                    <!--这里的blank是指打开超链接的时候会打开一个新窗口，如果是self则是本窗口打开-->
 
                    <!--箭头区域-->
                    <div class="arrow arrow-l">
                        <span class="iconfont icon-angle-left"></span>
                    </div>
                    <div class="arrow arrow-r">
                        <span class="iconfont icon-angle-right"></span>
                    </div>
 
                    <ul class="circle-list">
                        <li class="current"></li>
                        <li></li>
                        <li></li>
                        <li></li>
                    </ul>
                    <!--箭头区域-->
                    
                </div>
            </div>
 
            <div class="sys-class">
                <a href="#" class="show-box">
                    <div class="sys-icon fl" style="background-image:url(./images/system/java.png);"></div>
                    <div class="title fl">
                        <h4>Java程序设计基础</h4>
                        <p>项洁</p>
                    </div>
                </a>
 
                <a href="#" class="show-box">
                    <div class="sys-icon fl" style="background-image:url(./images/system/h5.png);"></div>
                    <div class="title fl">
                        <h4>互联网电子商务技术</h4>
                        <p>卢曼莎</p>
                    </div>
                </a>
 
                <a href="#" class="show-box">
                    <div class="sys-icon fl" style="background-image:url(./images/system/python.png);"></div>
                    <div class="title fl">
                        <h4>Python程序设计应用</h4>
                        <p>朱前飞</p>
                    </div>
                </a>
 
                <a href="#" class="show-box">
                    <div class="sys-icon fl" style="background-image:url(./images/system/web.png);"></div>
                    <div class="title fl">
                        <h4>Web系统与技术</h4>
                        <p>湛新霞</p>
                    </div>
                </a>
                
                <div class="line"></div>
 
                <a href="#" class="more-btn">
                    <div>课程</div>
                    <div>
                        more
                        <span class="iconfont icon-angle-right"></span>
                    </div>
                </a>
 
            </div>
        </div>
    </div>
    <!--课程轮播图区域结束-->
 
 
 
 
    <script src="./js/index.js"></script>
 
</body>
 
</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
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
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
/*整体布局 开始*/
#banner{
    padding: 32px 0;
    background-image: url(../images/bj-3.jpg);
}
.banner-box{
    height: 482px;
}
.g-banner{
    height: 382px;
}
.sys-class{
    height: 100px;
    border-radius: 0 0 8px 8px;
    background-color: #fff;
}
 
/*课程分类列表*/
.course-list{
    width: 256px;
    height: 382px;
    border-radius: 8px 0 0 0;
    background-color: #39364d;
    color: #fff;
}
.course-list ul{
    margin-top: 20px;
}
.course-list li{
    height: 50px;
    line-height: 50px;
    padding: 0 10px;
    cursor: pointer;
}
.course-list li:hover{
    background-color: rgba(255,255,255,.1);
}
.course-list .title{
    font-size: 14px;
}
.course-list .sub-title{
    font-size: 12px;
}
.course-list .icon-yousanjiao{
    float: right;
}
 
/*轮播图*/
.swiper{
    position: relative;
    width: 796px;
    height: 382px;
    border-radius: 0 8px 0 0;
}
 
.swiper a{
    display: block;
    width: 796px;
    height: 382px;
    background-image: url(../images/swiper-1.jpg);
    background-size: 796px;/*图片覆盖满区域*/
    border-radius: 0 8px 0 0 ;
}
 
/*箭头*/
.swiper .arrow{
    position: absolute;
    width: 50px;
    height: 50px;
    text-align: center;
    line-height: 50px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.1);
}
.swiper .arrow:hover{
    background-color: rgba(0, 0, 0, .1);
}
.arrow .iconfont{
    font-size: 30px;
    font-weight: 700;
}
.arrow-l{
    left: 20px;
    top: 160px;
}
.arrow-r{
    right: 20px;
    top: 160px;
}
 
/*切图按钮*/
.circle-list li{
    cursor: pointer;
    float: left;
    width: 8px;
    height: 8px;
    margin-left: 8px;
    border-radius: 50%;
    background-color: #fff;
}
.circle-list{
    position: absolute;
    right: 120px;
    bottom: 25px;
}
.circle-list li.current{
    width: 20px;
    border-radius: 4px;
}
/*下方体系课*/
.show-box{
    display: inline-block;/*行内块*/
    width: 192px;
    height: 45px;
    margin-top: 23px;
    margin-left: 15px;
 
}
.show-box .sys-icon{
    width: 45px;
    height: 45px;
    background-size: contain;
    margin-right: 8px;
}
.sys-icon{
    transition: .2s;
}
.sys-icon:hover{
    transform: translateY(-3px);
}
 
.show-box h4{
    font-size: 14px;
}
.show-box p{
    margin-top: 8px;
    font-size: 12px;
}
.show-box .title:hover h4{
    color: #0f5aa6;
}
.sys-class .line{
    width: 2px;
    height: 40px;
    background-color: #e8e8e8;
    display: inline-block;
}
.sys-class .more-btn{
    display: inline-block;
    font-size: 12px;
    margin-left: 16px;
    margin-top: 20px;
}
 
 
 
/*整体布局 开始*/

相关代码：

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
//关键词轮换
{
    //1.获取关键词对象
    let input = document.querySelector('.search input ');
    //2.设置关键词数组
    const keyWords=['播客','学习社区','校园风景','通知广告','推荐课程','课程排行','开课院系'];
    //使用时间函数切换input的placeholder值
    let i = 0 ;
    setInterval(() => {
        i++;
        if(i==5){
            i=0;
        }
        input.placeholder=keyWords[i];
    }, 2000);
}
 
//轮播图
{
    //声明轮播图数组
    const swiperImgList = [
        '../images/swiper-1.jpg',
        '../images/swiper-2.jpg',
        '../images/swiper-3.jpg',
        '../images/swiper-4.jpg',
    ];
    //获取A标签
    const swiperA = document.querySelector('.swiper a');
    //获取右侧切换按钮
    const rightArrow = document.querySelector('.arrow-r');
    //用来控制数组的
    let i = 0 ;
    rightArrow.onclick=function(){
        i++;
        if(i==4){
            i=0;
        }
        swiperA.style.backgroundImage = `url(${swiperImgList[i]})`; //这里是反引号，这个可以换行，并且可以用${}
    }
}

问题描述：每次点击切换按钮之后都会出现空白屏幕
Star3327752 2022-04-20
源自：前端综合案例-仿慕课首页   5-1 右切换按钮
16
收起

正在回答 回答被采纳积分+1

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

1回答
好帮手慕小尤 2022-04-21 11:59:45

同学你好，测试同学代码未出现同学描述的问题，未出现空白的屏幕。建议同学清除浏览器缓存试一下。

祝学习愉快！

0
收起回答
  • 雍正1024 #1

    同上述同学情况：点击切换无法实现切换功能，清楚浏览器缓存未解决。且声明的轮播图数组提示未被读取，麻烦老师看下https://img1.sycdn.imooc.com//climg/630476ac09113cc907820589.jpg

    2022-08-23 14:42:57
  • 好帮手慕小尤 回复 雍正1024 #2

    同学你好，建议同学以复制粘贴的方式将html、js文件中全部代码反馈到问答区，便于老师测试同学代码。

    祝学习愉快！

    2022-08-23 15:05:17
问题已解决，确定采纳
还有疑问，暂不采纳

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

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

0 星

相似问题

点击切换报错
79 0 10
老师，当我点击列表中的内容时切换不了不同的
25 1 3
左右按钮切换的时候卡住了
16 1 2
圆点切换不了
11 0 3
老师，请问下面的代码，为啥点击按钮，不能实现切换图片的功能呢？
0 1 4

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

Java工程师
  • 参与学习           人
  • 提交作业       8745    份
  • 解答问题       9886    个

综合就业常年第一，编程排行常年霸榜，北上广深月薪过万！ 不需要基础，无需脱产即可学习，只要你有梦想，想高薪！ 全新升级：技术栈升级（包含VUE3.0，ES6，Git）+项目升级（前后端联调与功能升级）

了解课程

本课精华内容

问答 作业

eclipse打开弹出这样是怎么回事

79 1

找不到jdk版本号的文件夹，打开里面什么都没有

56 1

Cannot resolve symbol 'Valid'

10 1

spring boot 和swagger2版本冲突

14 1

Maven项目管理中，关于Maven和IDE有几点小疑问。

56 9

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

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

 帮助反馈 APP下载

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

 公众号

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

在线咨询

领取优惠

免费试听

领取大纲

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