请老师看下，关于两个右按钮的问题。

请老师看下，关于两个右按钮的问题。

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
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
<!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/reset.css">
    <link rel="stylesheet" href="css/mucss.css">
</head>
 
<body>
    <header>
        <div class="h-top">
            <div class="center-wrap tel clearfix"><span>服务热线：<a href="javascript:;">400-8888-888</a></span></div>
        </div>
        <div class="h-down">
            <div class="logo-nav center-wrap clearfix">
                <h1 class="title">慕家居</h1>
                <ul class="nav-list">
                    <li>
                        <a href="javascript:;">网站首页
                            <div class="nav-icon"></div>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:;">关于我们
                            <div class="nav-icon"></div>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:;">服务建设
                            <div class="nav-icon"></div>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:;">产品中心
                            <div class="nav-icon"></div>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:;">服务大厅
                            <div class="nav-icon"></div>
                        </a>
                    </li>
                </ul>
                <div class="sousou">
                    <input type="text" placeholder="请输入搜索内容">
                    <a href="javascript:;" class="iconfont">&#xe6dd;</a>
                </div>
            </div>
        </div>
    </header>
    <!-- 中间内容 -->
    <section id="centent-content">
        <!-- banner部分 -->
        <section class="banner" id="banner">
                <img src="img/banner01.png" alt="" data-n="1">
                <div class="b-icon" id="b-icon">
                    <ul id="b_ul">
                        <li data-n="1" class="blue"><a href="javascript:;"></a></li>
                        <li data-n="2"><a href="javascript:;"></a></li>
                        <li data-n="3"><a href="javascript:;"></a></li>
                    </ul>
                </div>
            </div>
        </section>
        <!-- 五图滚动 -->
        <section class="five-img ">
            <div class="five-img-box center-wrap public">
                <div class="f-box  center-wrap " id="f-box">
                    <ul id="f_ul">
                        <li>
                            <a href="javascript:;">
                                <img src="img/product01.png" alt="">
                                <p class="f-font">时尚卫生间墙面颜色
                                    2029装饰设计</p>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:;">
                                <img src="img/product02.png" alt="">
                                <p class="f-font">现代北欧风格厨房装
                                    2029饰效果图</p>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:;">
                                <img src="img/product03.png" alt="">
                                <p class="f-font">现代时尚北欧风格卧
                                    2029室装饰画</p>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:;">
                                <img src="img/product04.png" alt="">
                                <p class="f-font">130平简约现代北欧
                                    2029风格装修</p>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:;">
                                <img src="img/product05.png" alt="">
                                <p class="f-font">现代北欧风格小客厅
                                    2029装修设计</p>
                            </a>
                        </li>
                    </ul>
                </div>
                <a href="javascript:;" class="prev" id="f_left"></a>
                <a href="javascript:;" class="next" id="f_right"></a>
            </div>
        </section>
        <!-- 了解我们 -->
        <section class="clearfix">
            <div class="our-box center-wrap  public">
                <h2 class="our-title">了解我们<span class="left-border"></span><span class="right-border"></span></h2>
                <div class="our-left">
                    <h3>关于我们</h3>
                    <dl>
                        <dt>慕家居装饰材料有限公司</dt>
                        <dd>慕家居家居装修网北欧风格家
                            具图片专区,是国内海量全面的
                            高质量北欧风格家具图片库…</dd>
                    </dl>
                    <a href="javascript:;">了解更多</a>
                </div>
                <div class="our-center">
                        <img src="img/aboutus.png" alt="">
                </div>
                <div class="our-right">
                    <ul>
                        <li><a href="javascript:;">在线留言</a></li>
                        <li><a href="javascript:;">广告经营</a></li>
                        <li><a href="javascript:;">网络咨询</a></li>
                    </ul>
                </div>
            </div>
        </section>
        <!-- 精品推荐 -->
        <section class="jptj">
            <div class="jptj-box center-wrap public">
                <h2 class="jptj-title">精品推荐</h2>
                <div class="jptj-img">
                    <div class="jptj-imgUlBox center-wrap ">
                        <ul id="jptj-imgUl">
                            <li>
                                <a href="javascript:;">
                                    <img src="img/jptj1.png" alt="">
                                    <div class="img-name">轻奢风格样板房客厅色彩搭配装修设计</div>
                                </a>
                            </li>
                            <li>
                                <a href="javascript:;">
                                    <img src="img/jptj2.png" alt="">
                                    <div class="img-name">简约美式风格卧室衣柜设计</div>
                                </a>
                            </li>
                            <li>
                                <a href="javascript:;">
                                    <img src="img/jptj3.png" alt="">
                                    <div class="img-name">轻奢风格L型厨房装修设计</div>
                                </a>
                            </li>
                        </ul>
                    </div>
                    <a href="javascript:;" class="prev icon" id="jptjLeft"></a>
                    <a href="javascript:;" class="next icon" id="jptjRight"></a>
                </div>
            </div>
        </section>
        <!-- 新闻中心 -->
        <section class="news">
            <div class="news-box center-wrap public clearfix">
                <h2 class="our-title">新闻中心<span class="left-border"></span><span class="right-border"></span></h2>
                <ul>
                    <li>
                        <dl>
                            <dt>最新招标</dt>
                            <dd><a href="javascript:;">重庆业主要求：一居室的户型，想把阳台利用起来，改成一室
                                一厅的户型，业主表示已经请朋友把以前的装修敲了，现在基本是毛坯的状态……</a></dd>
                        </dl>
                        <span>01</span>
                    </li>
                    <li>
                        <dl>
                            <dt>装修日记</dt>
                            <dd><a href="javascript:;">终于在北京四环里贷款买了套两居室二手房，还是很欣喜的，
                                为了装好它，我可真是费了心了，毕竟是自己以后的小家，所以我真是没少操心……</a></dd>
                        </dl>
                        <span>02</span>
                    </li>
                    <li>
                        <dl>
                            <dt>装修百科</dt>
                            <dd><a href="javascript:;">买房之后，无论是毛坯房还是留下二手房，很多业主都会选择进行装修。
                                装修可以为你带来一个你喜欢的房屋，同时满足你需要的生活方式……</a></dd>
                        </dl>
                        <span>03</span>
                    </li>
                    <li>
                        <dl>
                            <dt>热门搜索</dt>
                            <dd><a href="javascript:;">选择防盗门最重要的就是工艺质量：应特别注意检查有无焊接缺陷，诸如开焊、
                                未焊、漏焊等现象。看门扇与门框的配合是否密实，间隙是否均匀……</a></dd>
                        </dl>
                        <span>04</span>
                    </li>
                </ul>
            </div>
        </section>
    </section>
    <footer>
        <div class="foot-box ">
            <div class="foot-top center-wrap">
                <h3>慕家居</h3>
                <ul>
                    <li>咨询电话:&nbsp;&nbsp;010-88888888</li>
                    <li>公司网址:&nbsp;&nbsp;<a href="javascript:;">www.imooc.com</a></li>
                    <li>邮箱:&nbsp;&nbsp;<a href="javascript:;">KEFU@IMOOC.com</a></li>
                </ul>
            </div>
            <div class="foot-down center-wrap">
                <span class="foot-copy">Copyright &copy; 2020 imooc.com All Rights Reserved | 京ICP备 </span>
            </div>
        </div>
    </footer>
</body>
<script src="js/muhouse.js"></script>
</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
(function(){
  //自动轮播
  var banner=document.getElementById('banner');
  var bannerImg=banner.querySelector('img');
  var num=1;
  var timer;
  function bannerFun(){
    num++;
    if(num>3){
        num=1;
    }
    bannerImg.src="img/banner0"+num+".png";
    icons();
  }
 timer = setInterval(bannerFun,1200);
  //清除定时器
  banner.onmouseenter=function(){
   clearInterval(timer);
  }
  banner.onmouseleave=function(){
    clearInterval(timer);
    timer = setInterval(bannerFun,1200);
  }
  //小圆点
  var b_icon=document.getElementById('b-icon');
  var lis=document.querySelectorAll('li[data-n]');
  b_icon.onclick=function(e){
    if(e.target.tagName.toLowerCase()=='li'){
     var n = e.target.getAttribute('data-n');
     num=n;
     bannerImg.src="img/banner0"+n+".png";
     icons();
    }
  }
  function icons(){
    for(var i=0;i<lis.length;i++){
      lis[i].className='';
    }
    lis[num-1].className='blue';
  }
  //---------------------------------------------------------
  //五图特效
  var f_box=document.getElementById('f-box');
  var f_ul=document.getElementById('f_ul');
  var f_lis=f_ul.querySelectorAll('li');
  var f_left=document.getElementById('f_left');
  var f_right=document.getElementById('f_right');
  var f_num=0;
  var lock=true;
  for(var i=0;i<f_lis.length;i++){
    var copyUl=f_lis[i].cloneNode(true);
      f_ul.appendChild(copyUl);
  }
  //左按钮
  f_left.onclick=function(){
    if(!lock) return;
    lock=false;
    f_num++;
    f_ul.style.left=f_num*-221+'px';
    f_ul.style.transition='all .5s linear 0s';
    if(f_num>5){
      f_num=1;
      f_ul.style.left=0;
      f_ul.style.transition='none';
      setTimeout(function(){
        f_ul.style.transition='all .5s linear 0s';
        f_ul.style.left=f_num*-221+'px';
      },0)
    }
    setTimeout(function(){
      lock=true;
    },1000)
  }
  //右按钮
  f_right.onclick=function(){
    if(!lock) return;
    lock=false;
    // f_ul.style.transition='all .5s linear 0s';
    // f_ul.style.left=f_num*-221+'px';
    if(f_num==0){
      f_ul.style.transition='none';
      f_ul.style.left=5*-221+'px';
      f_num=5;
    }
    f_num--;
    setTimeout(function(){
      f_ul.style.transition='all .5s linear 0s';
      f_ul.style.left=f_num*-221+'px';
    },0)
    setTimeout(function(){
      lock=true;
    },1000)
  }
  //---------------------------------------------------------
  //精品推荐
    var jptj_imgUl=document.getElementById('jptj-imgUl');
    var jptj_lis=jptj_imgUl.querySelectorAll('li');
    var jptjLeft=document.getElementById('jptjLeft');
    var jptjRight=document.getElementById('jptjRight');
    var jptjNum=0;
    for(var i=0;i<jptj_lis.length;i++){
     var lisClone=jptj_lis[i].cloneNode(true);
      jptj_imgUl.appendChild(lisClone);
    }
    //左按钮
    jptjLeft.onclick=function(){
      if(!lock) return;
      lock=false;
      jptjNum++;
      jptj_imgUl.style.left=jptjNum*-368+'px';
      jptj_imgUl.style.transition='all .5s linear 0s';
      if(jptjNum>3){
        jptjNum=1;
        jptj_imgUl.style.left=0;
        jptj_imgUl.style.transition='none';
        setTimeout(function(){
          jptj_imgUl.style.left=jptjNum*-368+'px';
          jptj_imgUl.style.transition='all .5s linear 0s';
        },0)
      }
      setTimeout(function(){
        lock=true;
      },1000)
    }
    //右按钮
    jptjRight.onclick=function(){
      if(!lock) return;
      lock=false;
      // jptj_imgUl.style.transition='all .5s linear 0s';
      // jptj_imgUl.style.left=jptjNum*-368+'px';
      if(jptjNum==0){
        jptj_imgUl.style.transition='none';
        jptj_imgUl.style.left=3*-368+'px';
        jptjNum=3;
      }
      jptjNum--
      setTimeout(function(){
        jptj_imgUl.style.transition='all .5s linear 0s';
        jptj_imgUl.style.left=jptjNum*-368+'px';
      },0)
      setTimeout(function(){
        lock=true;
      },1000)
    }
})()
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
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
/* 公共部分 */
.public h2{
    text-align: center;
    color: #696868;
    font-size: 32px;
    padding-bottom: 76px;
    position: relative;
    width: 1200px;
    height: 42px;
}
.public h2::before{
    content: 'about us';
    color: #9B9B9B;
    font-size: 18px;
    position: absolute;
    top:44px;
    left: 50%;
    margin-left:-38px;
    width: 76px;
    /* padding-bottom: 11px;
    border-bottom: 1px solid #0058AA; */
}
.public h2::after{
    content: '';
    width: 94px;
    height: 1px;
    position: absolute;
    background-color:#0058AA ;
    bottom:41px;
    left: 50%;
    margin-left:-47px;
}
.public h2 .left-border,.right-border{
    width: 535px;
    height: 42px;
    border-bottom:1px solid #808080;
    position: absolute;
}
.public h2 .left-border{
    left:0;
}
.public h2 .right-border{
    right:0;
}
 
.public .prev{
    left:0;
    background: url(../img/img.png) no-repeat -91px -109px;
}
.public .prev:hover{
    background-position:-4px -107px ;
}
.public .next{
    right:0;
    background: url(../img/img.png) no-repeat -33px -18px;
}
.public .next:hover{
    background-position: -121px -18px;
}
/* ------------------------------------------------------------------------------------------------------ */
header .h-top{
    height: 40px;
    background-color: #0058AA;
    min-width: 1200px;
}
header .h-top .tel>span{
    float: right;
    line-height: 40px;
    font-size: 18px;
    color: #fff;
}
header .h-top .tel>span>a{
    color: #fff;
}
header .h-down{
    height: 121px;
    position: relative;
}
header .h-down>.logo-nav{
    position: relative;
}
header .h-down>.logo-nav>h1{
    float: left;
    font-size: 64px;
    color: #0058AA;
    cursor: pointer;
    line-height:121px ;
    margin-right: 75px;
}
header .h-down>.logo-nav>.nav-list{
    height: 121px;
    
}
header .h-down>.logo-nav>.nav-list>li{
    float: left;
    margin-right: 61px;
    padding-top:90px;
    position: relative;
}
header .h-down>.logo-nav>.nav-list>li>a>div{
    width: 34px;
    height: 34px;
    position: absolute;
    top:19px;
    left: 50%;
    margin-left:-25px;
    padding:8px;
    background: url(../img/h1.png) no-repeat center center;
    transform: scale(1);
    border-radius: 50%;
}
header .h-down>.logo-nav>.nav-list>li>a>div:hover{
    animation: sca .5s linear 0s infinite alternate;
    background-color: #0058AA;
}
header .h-down>.logo-nav>.nav-list>li:nth-child(2)>a>div{
    background-image: url(../img/h2.png);
}
header .h-down>.logo-nav>.nav-list>li:nth-child(3)>a>div{
    background-image: url(../img/h3.png);
}
header .h-down>.logo-nav>.nav-list>li:nth-child(4)>a>div{
    background-image: url(../img/h4.png);
}
header .h-down>.logo-nav>.nav-list>li:nth-child(5)>a>div{
    background-image: url(../img/h5.png);
}
header .h-down>.logo-nav>.nav-list>li>a>div:hover{
    background-image: url(../img/h1-1.png);
}
header .h-down>.logo-nav>.nav-list>li>a>div:hover{
    background-image: url(../img/h1-1.png);
}
header .h-down>.logo-nav>.nav-list>li:nth-child(2)>a>div:hover{
    background-image: url(../img/h2-2.png);
}
header .h-down>.logo-nav>.nav-list>li:nth-child(3)>a>div:hover{
    background-image: url(../img/h3-3.png);
}
header .h-down>.logo-nav>.nav-list>li:nth-child(4)>a>div:hover{
    background-image: url(../img/h4-4.png);
}
header .h-down>.logo-nav>.nav-list>li:nth-child(5)>a>div:hover{
    background-image: url(../img/h5-5.png);
}
@keyframes sca{
    from{
        transform: scale(1);
    }
    to{
        transform: scale(1.1);
    }
}
header .h-down>.logo-nav>.nav-list>li>a{
    font-size: 16px;
    color: #545454;
}
header .h-down>.logo-nav>.nav-list>li:last-child{
    margin-right: 0;
}
header .h-down>.logo-nav>.sousou{
    width: 229px;
    height: 38px;
    border: 1px  #D3D3D3 solid;
    background-color: #0058AA;
    position: absolute;
    right: 48px;
    bottom: 33px;
}
header .h-down>.logo-nav>.sousou>input{
    width: 229px;
    height: 38px;
    outline: none;
    text-indent:1em;
    border: none;
}
header .h-down>.logo-nav>.sousou>a{
    position: absolute;
    right: -49px;
    width: 48px;
    height: 40px;
    font-size: 33px;
    color: #fff;
    background-color: #0058AA;
    bottom:-1px;
    text-align: center;
    line-height: 39px;
}
/* banner */
.banner{
    margin-bottom:39px;
    position: relative;
    cursor: pointer;
}
.banner>img{
    min-width:1200px;
    display: block;
    width: 100%;
}
.banner .b-icon{
    width: 54px;
    height: 10px;
    position: absolute;
    bottom:50px;
    left:50%;
    margin-left: -27px;
}
.banner  .b-icon>ul>li{
    float: left;
    background-color: #fff;
    margin-right:12px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
}
.banner  .b-icon>ul>li{
    background-color: #fff;
}
.banner  .b-icon>ul>li.blue{
    background-color: #0058AA;
}
.banner  .b-icon>ul>li:last-child{
    margin-right: 0;
}
/* 五图 */
.five-img{
    position: relative;
}
.five-img .f-box>ul{
    /* margin-left: 73px; */
    position: absolute;
    left:0;
    width: 2200px;
    transition: all .5s linear 0s;
}
.five-img .f-box>ul>li{
    float: left;
    width: 171px;
    margin-right:50px;
}
/* .five-img .f-box>ul>li:last-child{
    margin-right:0px;
} */
.five-img .f-box>ul>li:last-child{
    margin-right: 0;
}
.five-img .f-box>ul>li>a{
    color: #838383;
    font-size: 18px;
}
.five-img .f-box>ul>li>a>p{
    margin-top:11px;
}
.five-img .f-box{
    height: 234px;
    position: relative;
    margin-bottom: 32px;
    width: 1056px;
    overflow: hidden;
}
.five-img .five-img-box .prev,.next{
    width: 48px;
    height: 48px;
    position: absolute;
    top:50%;
    margin-top:-24px;
}
.five-img .five-img-box .prev{
    left:0px;
}
.five-img .five-img-box .next{
    right:0px;
}
.five-img-box{
    width: 1200px;
    position: relative;
}
/* 了解我们 */
.our-box{
    height: 456px;
}
.our-box>div{
    float: left;
}
.our-box>div{
    width: 400px;
    height: 256px;
}
.our-box .our-left{
    padding-right: 147px;
    box-sizing: border-box;
}
.our-box .our-left h3{
    color: #0058AA ;
    font-size: 26px;
}
.our-box .our-left>dl>dt{
    color: #5A5A5A;
    font-size: 21px;
    position: relative;
    margin-bottom: 24px;
}
.our-box .our-left>dl>dt::before{
    content: '';
    width: 142px;
    border-bottom: 4px solid #0058AA;
    position: absolute;
    bottom:-8px;
}
.our-box .our-left>dl>dd{
    color: #7B7C7C;
    font-size: 18px;
    margin-bottom: 27px;
}
.our-box .our-left>a{
    width: 130px;
    height: 38px;
    background-color: #0058AA;
    display: block;
    color: #fff;
    font-size: 18px;
    text-align: center;
    line-height: 38px;
}
@keyframes our{
    10%{
        transform:rotate(10deg);
    }
    50%{
        transform:rotate(-10deg) ;
        
    }
    100%{
        transform:rotate(10deg) ;
    }
}
.our-box .our-left>a:hover{
    animation: our 1.5s linear 0s infinite alternate;
}
.our-box .our-center{
    overflow: hidden;
}
.our-box .our-center>img{
    transition:transform .5s linear 0s ;
}
.our-box .our-center>img:hover{
    transform: scale(1.1);
}
.our-box .our-right>ul>li>a{
    width: 273px;
    height: 61px;
    background-color: #CCCCCC;
    margin-top: 10px;
    float: right;
    padding:10px 0px 10px 89px;
    box-sizing: border-box;
    position: relative;
    color: #fff;
    font-size: 22px;
    transition:background-color .5s linear 0s ;
}
.our-box .our-right>ul>li>a::before{
    content: 'on-line message';
    font-size: 12px;
    color: #fff;
    position: absolute;
    text-align: center;
    bottom:10px;
}
.our-box .our-right>ul>li>a:hover{
    background-color: #0058AA;
}
.our-box .our-right>ul>li:nth-child(2)>a::before{
    content: 'Advertising management';
}
.our-box .our-right>ul>li:nth-child(3)>a::before{
    content: 'Network consultation';
}
.our-box .our-right>ul>li>a::after{
    content: '';
    position: absolute;
    width: 40px;
    height: 34px;
    background-color: darkturquoise;
    left:30px;
    top:14px;
    background: url(../img/our.png) no-repeat -163px 0;
}
.our-box .our-right>ul>li:nth-child(2)>a::after{
    background-position: -331px 0;
}
.our-box .our-right>ul>li:nth-child(3)>a::after{
    background-position: 0 0;
}
/* 精品推荐 */
.jptj{
    height: 590px;
    background-color: #EFF0F4;
    margin-bottom:82px;
}
.jptj-box{
    height: 590px;
    padding:70px 0 68px 0;
    box-sizing: border-box;
    position: relative;
}
.jptj-box>h2::before{
    content: 'Boutique recommendation';
    width: 232px;
    margin-left:-116px;
}
.jptj-box .jptj-img>.jptj-imgUlBox{
    width: 1081px;
    height: 326px;
    /* background-color: blue; */
    position: relative;
    overflow: hidden;
}
.jptj-box .jptj-img>.jptj-imgUlBox>ul{
    position: absolute;
    left:0;
    width: 2185px;
}
.jptj-box .jptj-img>.jptj-imgUlBox>ul>li{
    float: left;
}
.jptj-box .jptj-img>.jptj-imgUlBox>ul>li>a>img{
    display: block;
}
.jptj-box .jptj-img>.jptj-imgUlBox>ul>li>a{
    float: left;
    width: 345px;
    height: 326px;
    margin-right: 23px;
    position: relative;
    overflow: hidden;
}
.jptj-box .jptj-img>.jptj-imgUlBox>ul>li:last-child a{
    margin-right: 0px;
}
.jptj-box .jptj-img>.jptj-imgUlBox>ul>li>a>div{
    width: 345px;
    height: 45px;
    background-color:rgba(0,0,0,0.50);
    line-height: 45px;
    color: #fff;
    font-size: 16px;
    position: absolute;
    bottom: -45px;
    overflow: hidden;
    transition: bottom .5s linear 0s;
    text-indent: 1em;
}
.jptj-box .jptj-img>.jptj-imgUlBox>ul>li>a:hover .img-name{
    bottom:0;
}
.jptj-box .jptj-img{
    position: relative;
    height: 326px;
}
.jptj-box .jptj-img>a.icon{
    width: 48px;
    height: 48px;
    position: absolute;
    top:50%;
    margin-top:-24px;
}
/* 新闻中心 */
.news-box{
    height: 463px;
}
.news-box>h2::before{
    content: 'press center';
    width: 106px;
    margin-left: -53px;
}
.news-box>ul>li{
    width: 503px;
    height: 109px;
    float: left;
    margin-right: 74px;
    padding-left:103px;
    box-sizing: border-box;
    position: relative;
    margin-bottom: 40px;
}
.news-box>ul>li>dl>dt{
    color: #4A4A4A;
    font-size: 21px;
    margin-bottom: 12px;
}
.news-box>ul>li>dl>dd>a{
    font-size: 18px;
    color: #4A4A4A;
    
}
.news-box>ul>li>dl>dd>a:hover{
    text-decoration:underline #000;
}
.news-box>ul>li>span{
    width: 65px;
    height: 65px;
    position: absolute;
    left: 0;
    top:0;
    font-size: 40px;
    color: #fff;
    text-align: center;
    background: url(../img/talk-bg.png) no-repeat center center;
}
@keyframes down{
    from{
        top:10px;
    }
    to{
        top:0;
    }
}
.news-box>ul>li:hover span{
    animation:  down .5s linear 0s infinite alternate-reverse;
}
/* 底部 */
footer{
    height: 240px;
    background-image: linear-gradient(to bottom, #06142F 90%, #202C46 10%);
}
footer .foot-top{
    height: 210px;
}
footer .foot-box .foot-top>h3{
    font-size: 48px;
    color: #fff;
    width: 144px;
    height: 63px;
    float: left;
    margin-right: 101px;
    margin-top:74px;
}
footer .foot-box .foot-top>ul{
    float: left;
    width: 206px;
    margin-top:53px;
}
footer .foot-box .foot-top>ul>li,a{
    color: #fff;
    font-size: 16px;
}
footer .foot-box .foot-top>ul>li{
    height: 40px;
}
footer .foot-box .foot-down{
    height: 30px;
    position: relative;
}
footer .foot-box .foot-down .foot-copy{
    width: 398px;
    color: #fff;
    font-size: 14px;
    position: absolute;
    line-height: 30px;
    left:50%;
    margin-left:-199px;
}
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
/*
YUI 3.18.1 (build f7e7bcb)
Copyright 2014 Yahoo! Inc. All rights reserved.
Licensed under the BSD License.
http://yuilibrary.com/license/
*/
 
html {
    color: #000;
    background: #FFF
}
 
body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
code,
form,
fieldset,
legend,
input,
textarea,
p,
blockquote,
th,
td {
    margin: 0;
    padding: 0
}
 
table {
    border-collapse: collapse;
    border-spacing: 0
}
 
fieldset,
img {
    border: 0
}
 
address,
caption,
cite,
code,
dfn,
em,
strong,
th,
var {
    font-style: normal;
    font-weight: normal
}
 
ol,
ul {
    list-style: none
}
 
caption,
th {
    text-align: left
}
 
h1,
h2,
h3,
h4,
h5,
h6 {
    font-size: 100%;
    font-weight: normal
}
 
q:before,
q:after {
    content: ''
}
 
abbr,
acronym {
    border: 0;
    font-variant: normal
}
 
sup {
    vertical-align: text-top
}
 
sub {
    vertical-align: text-bottom
}
 
input,
textarea,
select {
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    *font-size: 100%
}
 
legend {
    color: #000
}
 
#yui3-css-stamp.cssreset {
    display: none
}
a{
    text-decoration: none;
}
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
@font-face {
    font-family:"微软雅黑" ;
    src: url(../font/msyh.ttc) format('truetype');
}
@font-face {
  font-family: 'iconfont';
  src: url('../font/iconfont.ttf?t=1650954238761') format('truetype');
}
.iconfont {
    font-family: "iconfont" !important;
    font-size: 16px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
body{
    font-family:'PingFangSCRegular.ttf' ;
}
.clearfix{
    overflow: hidden;
}
.clearfix::after{
    content: '';
    display: block;
    clear: both;
    overflow: hidden;
}
.center-wrap{
    width: 1200px;
    margin:0 auto;
}
.tac{
    text-align: center;
}
 
.db{
    display: block;
}
.dib{
    display: inline-block;
}
img{
    display: block;
}

请问一下老师，关于两个右按钮注释部分有必要写吗？还是可以不写，因为不写也能正常执行。不懂为什么能正常执行。
慕仙7313728 2022-06-30
源自：“仿穷游”首页动态项目   3-2 项目作业
14
收起

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

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

1回答
好帮手慕小李 2022-07-01 09:59:06

同学你好，右侧按钮中的注释代码可以省略，原因如下：

https://img1.sycdn.imooc.com//climg/62be52a10989a26910320542.jpg

如上图中同学相当于在css中进行了transition赋值，那么在点击的时候就不会出现卡顿第一张后面在点才会有动画过渡效果这样的问题出现。

但在精品推荐中的为什么没有在css中设置却没有问题，这是因为同学将延时器的时间设置为0了如下：

https://img1.sycdn.imooc.com//climg/62be54230931c5c809350463.jpg

同学可以将0改成300毫秒试试，就能看到老师所说的问题点了。

那么这里推荐都在css中做初始化，就是说设置好了transition属性，并且在css中提前定义left。如果不在css中定义的话，那么也要有一个初始化的思想，比如在js中加载的时候就将这些属性提前定义赋值一下，这样对于后面学习也对今后的工作更有帮助。

祝学习愉快！

0
收起回答
  • 提问者 慕仙7313728 #1

    你好老师，问个问题。关于轮播图左右按钮后图片移动的问题，按照我自己的逻辑，点击右按钮图片不是应该往右边移动吗？按左边就往左移动？。在老师的批复作业中：

    1、优化建议：

    点击右箭头，整体应该往左移（常规效果），同学的运动方向与常规效果相反，建议调整一下；左箭头同理。

    无法理解啊。。。。。


    2022-07-05 10:15:05
  • 好帮手慕小李 回复 提问者 慕仙7313728 #2

    同学你好，看优化建议这一块一般是常规效果，那么一般来说确实是点击右按钮整体往左移动的，同学可以看看其他网站的banner或者类似这种的轮播效果如 https://www.swiper.com.cn/ swiper轮播官网。同学点点看。

    祝学习愉快！

    2022-07-05 13:07:39
  • 提问者 慕仙7313728 回复 好帮手慕小李 #3

    好的，谢谢老师

    2022-07-05 18:05:47
问题已解决，确定采纳
还有疑问，暂不采纳

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

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

0 星

相似问题

左右按钮绑定事件，没有反应
20 0 6
实现按钮跳转
16 0 9
老师看看，点击按钮无响应
1 0 3
老师，开关 图标更换问题
16 0 4
请老师检查，在按钮处存在疑问
10 1 3

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

前端工程师
  • 参与学习           人
  • 提交作业       15697    份
  • 解答问题       17883    个

入行前端，是明智的选择！市场需求大，就业前景好，入行门槛低，小白易上手 全新升级:技术更新,Vue3.0/TypeScript/React17.x; 技术更全面,从0基础到全栈开发再到大型项目构建

了解课程

本课精华内容

问答 作业

老师,请问vscode有哪些好用的插件推荐一下...

157 1

老师,API具体是指什么呢?

75 1

老师,这两种情况为什么得到的结果不一样?

31 2

没有思路

201 5

老师给点提示。

155 1

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

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

 帮助反馈 APP下载

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

 公众号

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

在线咨询

领取优惠

免费试听

领取大纲

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