onclick点两次，再点第三次会跳转三次

onclick点两次，再点第三次会跳转三次

因为设置了1s延迟，双击只切换一张图片，但是再次点击（也就是第三次点击）会直接跳到第三张图片，不应该跳到第二张吗

部分相关代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 function changeImg(Index)
    {     if(flag==false)return;
        flag=false;
        swiperA.style.backgroundImage=`url(${swiperImgList[Index].path})`;
        swiperA.href=swiperImgList[Index].url;
        banner.style.backgroundImage=`url(${swiperImgList[Index].bg})`;
        for(let j=0;j<lis.length;j++){
            lis[j].className='';
            lis[Index].className='current';        }     
        setTimeout(()=>{
            flag=true;
        },1000)
    }  
    changeImg(i);
    leftArrow.onclick=function(){
        i=--i==-1?3:i;
       changeImg(i);
              }
    rightArrow.onclick=function(){
        i=++i==4?0:i;
        
        changeImg(i)
              }

index.js

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
{
    //1.获取搜索框对象
    let input=document.querySelector('.search input');
    //2、设置关键词数组
    const keyWords=['Vue3.0','java','多线程','c++'];
    //3、使用setInterval来切换搜索框对象的placeHolder值
let i=0;
input.placeholder=keyWords[i];
setInterval(()=>{
    i++;
    if(i==4)i=0;
    input.placeholder=keyWords[i];
},2000);
}
//轮播图图片
{
    //图片数组
    const swiperImgList=[
        {path:'./images/swiper/swiper-1.jpg',
        url:'http://class.imooc.com/',
         bg:'./images/swiper/bj-0.jpg'},
        {path:'./images/swiper/swiper-2.jpg',
        url:'http://class.imooc.com/',
         bg:'./images/swiper/bj-1.jpg'},
        {path:'./images/swiper/swiper-3.jpg',
        url:'https://coding.imooc.com/',
         bg:'./images/swiper/bj-2.jpg'},
        {path:'./images/swiper/swiper-4.jpg',
        url:'https://coding.imooc.com/',
         bg:'./images/swiper/bj-3.jpg'}
    ];
    
    const rightArrow=document.querySelector('.arrow-r');
    const leftArrow=document.querySelector('.arrow-l');
    const banner=document.querySelector('#banner');
    //获取所有的切换圆点
    const lis=document.querySelectorAll('.circle-list li');
    //获取a标签
    const swiperA=document.querySelector('.swiper a');
    //设置是否允许点击执行的标志位
    let flag=true;
    let i=0;
    function changeImg(Index){
        if(flag==false)return;
        flag=false;
        swiperA.style.backgroundImage=`url(${swiperImgList[Index].path})`;
        swiperA.href=swiperImgList[Index].url;
        banner.style.backgroundImage=`url(${swiperImgList[Index].bg})`;
        for(let j=0;j<lis.length;j++){
            lis[j].className='';
            lis[Index].className='current';
        }
      
        setTimeout(()=>{
            flag=true;
        },1000)
    }
    
    
    changeImg(i);
    leftArrow.onclick=function(){
        i=--i==-1?3:i;
       changeImg(i);
              }
    rightArrow.onclick=function(){
        i=++i==4?0:i;
        
        changeImg(i)
              }
    
}

text.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
<!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>Document</title>
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./font/iconfont.css">
    <link rel="stylesheet" href="./css/01-header.css">
    <link rel="stylesheet" href="./css/02-banner.css">
</head>
<body>
    <!--头部区域开始-->
    <div id="header">
        <div class="nav-box">
            <h1 class="fl">
                <a href="index.html">慕课网</a>
            </h1>
    <!-- 专栏 -->
            <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=""> <!-- 红色N图标 -->        
            </ul> 
    <!-- 搜索框 -->        
            <div class="search fl">  <!-- 外框 -->
                <div>                <!-- 内框 -->
                    <input type="text">  <!-- 输入框 -->
                    <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-tianchongxing-"></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="#"></a>
                    <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-con fl" style="background-image: url(./images/system/java.png);"></div>
                    <div class="title fl">
                        <h4>工程师</h4>
                        <p>综合能力</p>
                   </div>
                </a>
                <a href="#" class="show-box">
                    <div class="sys-con fl" style="background-image: url(./images/system/python.png);"></div>
                    <div class="title fl">
                        <h4>asd工程师</h4>
                        <p>综合sadas能力</p>
                    </div>
                </a>
                <a href="#" class="show-box">
                    <div class="sys-con fl" style="background-image: url(./images/system/web.png);"></div>
                    <div class="title fl">
                        <h4>大苏打工程师</h4>
                        <p>阿萨是否综合能力</p>
                    </div>
                </a>
                <a href="#" class="show-box">
                    <div class="sys-con fl" style="background-image: url(./images/system/java-s.png);"></div>
                    <div class="title fl">
                        <h4>asdasd工程师</h4>
                        <p>asdasdas综合能力</p>
                    </div>
                </a>
                <div class="line"></div>
                <a href="#" class="more-btn fr">
                    <div>体系课</div>
                    <div>more
                        <span class="iconfont icon-angle-right"></span>
                    </div>
                </a>
            </div>
        </div>
    </div>
    <!-- 课程和轮播图 结束 -->
<script src="./js/index.js"></script>
    
</body>
</html>

02-banner.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
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
/* 整体布局 开始 */
#banner{
    padding: 15px 0;
    
}
.banner-box{
    height: 482px;
    
}
.g-banner{
    height: 382px;
    
}
.course-list{
    height: 382px;
    width: 231px;
    background-color: #39364D;
    border-radius: 8px 0 0 0;
    color:#FFFFFF  
    
}
 
.swiper{
    position: relative;
    height: 382px;
    width: 669px;
    
    border-radius: 0 8px 0 0;
}
.sys-class{
    position: relative;
    height: 100px;
    background-color: #fff;
    border-radius: 0 0 8px 8px;
    box-shadow: 0 5px 20px 0 rgba(0,0,0,.1);
}
/* 整体布局 结束 */
/* 课程列表 */
.course-list ul{
    padding-top: 20px;
}
.course-list li{
    cursor: pointer;
    height: 50px;
    padding: 0 13px;
    font-size: 15px;
   line-height: 50px;
}
.course-list li:hover{
    background-color: rgba(255,255,255,.1);
}
.course-list .iconfont{
    float: right;
}
/* 轮播图 */
.swiper a{
    
    display: block;
    height: 382px;
    width: 669px;
    background-image: url(../images/swiper/swiper-1.jpg);
    background-size: 669px 383px ;
    border-radius: 0 8px 0 0;
    transition: 1s;
}
.swiper .arrow{
    position: absolute;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    text-align: center;
    line-height: 50px;
    background-color: rgba(255,255,255,.1);
}
.swiper .arrow:hover{
    background-color: rgba(0,0,0,.1);
}
.arrow .iconfont{
    font-size: 30px;
    font-weight: 700px;
}
.arrow-l{
    left: 3px;
    top:160px;
}
.arrow-r{
    left: 616px;
    top:160px;
}
.circle-list{
    position: absolute;
    right: 29px;
    bottom: 13px;
}
.circle-list li{
    
    cursor: pointer;
    margin-left: 5px;
    float: left;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #FFFFFF;
}
.circle-list li.current{
    width: 20px;
    border-radius: 4px ;
}
/* 下方简介 */
.show-box{
    display: inline-block;
    width: 179px;
    height: 57px;
    margin-top: 5px;
    margin-left: 9px;
}
.show-box .sys-con{
    height: 45px;
    width: 45px;
    background-size: cover;
    margin-right: 7px;
    transition-duration:1s;
}
.show-box .sys-con:hover{
    transform:translateY(-4px);
}
.show-box h4{
    font-size: 18px;
}
.show-box p{
    font-size: 12px;
}
.show-box .title:hover h4{
    color:#ec1500;
}
.sys-class .line{
    display: inline-block;
    margin-top: 18px;
    margin-left: 8px;
    width: 2px;
    height: 68px;
    background-color: #e8e8e8;
}
.sys-class .more-btn{
    display: inline-block;
    position: absolute;
    top: 27px;
    left: 806px;
}
起風了3592092 2022-09-15
源自：前端综合案例-仿慕课首页   5-5 圆点切换和自动轮播
12
收起

正在回答

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

1回答
好帮手慕小蓝 回答被采纳获得+3积分 2022-09-16 11:33:06

同学你好，老师使用同学的代码，没有出现同学描述的问题。

老师这里点击圆点之后，并没有任何效果。结合同学提供的代码，是因为同学提供的代码中没有为圆点绑定点击事件。

猜测同学提供的JS代码不完整，建议同学提供完整的代码。

祝学习愉快~

0
收起回答
  • 起風了3592092 提问者 #1

    不是点击圆点，点击左右两侧的箭头，双击只跳转一次正常，但再点一次会跳转两下，不应该是跳转一下吗

    https://img1.sycdn.imooc.com//climg/63241696099cc1b315440808.jpg

    2022-09-16 14:25:15
  • 好帮手慕小蓝 回复 提问者 起風了3592092 #2

    同学你好，建议同学提问的时候在对应的课程下，以免产生不必要的误会。

    同学的代码出现问题的原因是：“每秒只能点击1次”的限制只对图片的变换生效，对按钮的单击事件没有生效。所以需要在onclick事件对应的函数中使用setTimeout函数。但是此时由于同学的代码中，在变换图片时也使用了这样的方式，会导致图片无法更换。所以只需要将setTimeout放在onclick事件中，而不放在changeImg中即可。

    以右侧按钮为例，修改后的代码如下：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    function changeImg(Index){
        swiperA.style.backgroundImage=`url(${swiperImgList[Index].path})`;
        swiperA.href=swiperImgList[Index].url;
        banner.style.backgroundImage=`url(${swiperImgList[Index].bg})`;
        for(let j=0;j<lis.length;j++){
            lis[j].className='';
            lis[Index].className='current';
        }
    }
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    rightArrow.onclick=function(){
        if(flag==false)return;
        flag=false;
        i=++i==4?0:i;
        console.log(i);
        setTimeout(() => {
                flag = true;
        }, 1000);
        changeImg(i);
    }

    祝学习愉快~

    2022-09-16 15:20:25
问题已解决，确定采纳
还有疑问，暂不采纳

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

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

0 星

相似问题

第一次，第二次，第三次
19 0 3
为什么这个在调试的时候会弹出两次输入框？
0 0 4
每在表单输入一次内容，登陆成功提示就会弹出来一次，连着弹好几次登陆成功是怎么回事？
32 0 4
请问在三次握手前为什么又多次tcp的数据传输，红框中的是三次握手吧，但黄框中的是什么？
1 0 3
老师我有点乱
19 0 5

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

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
您的移动学习伙伴

 公众号

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

在线咨询

领取优惠

免费试听

领取大纲

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