本文实例为大家分享了JavaScript实现京东轮播图效果展示的具体代码,供大家参考,具体内容如下
做了一个仿京东的轮播图,当然没有人家官网的精美啦。
主要技术点:
- 每隔3秒自动切换图片;
- 鼠标移入图片自动暂停切换,鼠标移出则继续;
- 点击左右方向按钮手动切换图片;
- 鼠标移到灰色圆点,显示对应的图片,并加亮显示。
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
|
< body > < h1 >轮播图展示</ h1 > < div id = "did" > <!-- 图片 --> < div id = "img-div" onmouseover = "doStop()" onmouseout = "doStart()" > < img src = "./1.jpg" > < img src = "./2.jpg" > < img src = "./3.jpg" > < img src = "./4.jpg" > < img src = "./5.jpg" > < img src = "./6.jpg" > < img src = "./7.jpg" > < img src = "./8.jpg" > </ div > <!-- 左右按钮 --> < div id = "btn-div" > < div id = "left-btn" onclick = "doLeftClick()" > < h3 > < </ h3 > </ div > < div id = "right-btn" onclick = "doRightClick()" > < h3 > > </ h3 > </ div > </ div > <!-- 圆点 --> < div id = "cir-div" > < div onmouseover = "doMove(1)" ></ div > < div onmouseover = "doMove(2)" ></ div > < div onmouseover = "doMove(3)" ></ div > < div onmouseover = "doMove(4)" ></ div > < div onmouseover = "doMove(5)" ></ div > < div onmouseover = "doMove(6)" ></ div > < div onmouseover = "doMove(7)" ></ div > < div onmouseover = "doMove(8)" ></ div > </ div > </ div > </ body > |
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
|
<style> * { margin : 0px ; padding : 0px ; } body { background-color : rgb ( 255 , 249 , 249 ); } h 1 { text-align : center ; padding-top : 40px ; color : rgba( 250 , 54 , 129 , 0.562 ); } #did { position : relative ; width : 590px ; height : 470px ; margin : 30px auto ; } #img-div { position : absolute ; } #img-div img { width : 590px ; display : none ; cursor : pointer ; z-index : -1 ; } /* 这两段可不加 */ /* 显示第一张图片 */ #img-div img:first-child { display : block ; } /* 点亮第一个圆点 */ #cir-div div:first-child { background : #fff ; } #cir-div { position : absolute ; /* 相对于图片的位置 */ left : 40px ; bottom : 25px ; } /* 下方圆点 */ #cir-div div { width : 8px ; height : 8px ; float : left ; /* 50%时为圆形 */ border-radius: 50% ; margin-right : 6px ; border : 1px solid rgba( 0 , 0 , 0 , . 05 ); background : rgba( 255 , 255 , 255 , . 4 ); } #left-btn { position : absolute ; /* 相对于图片的位置 */ top : 45% ; /* 左半圆按钮 */ width : 27px ; height : 38px ; background : rgba( 119 , 119 , 119 , 0.5 ); border-radius: 0 20px 20px 0 ; /* 动画效果,放在变化前,当鼠标移动上面时,会缓慢变色 */ transition: background-color 0.3 s ease-out; } #right-btn { position : absolute ; /* 相对于图片的位置 */ top : 45% ; right : 0px ; /* 右半圆按钮 */ width : 27px ; height : 38px ; background-color : rgba( 119 , 119 , 119 , 0.5 ); border-radius: 20px 0 0 20px ; /* 动画效果,放在变化前,当鼠标移动上面时,会缓慢变色 */ transition: background-color 0.3 s ease-out; } #left-btn:hover { background-color : rgba( 32 , 32 , 32 , 0.5 ); cursor : pointer ; } #right-btn:hover { background-color : rgba( 32 , 32 , 32 , 0.5 ); cursor : pointer ; } #left-btn h 3 { color : #fff ; margin-top : 4px ; margin-left : 2px ; } #right-btn h 3 { color : #fff ; margin-top : 4px ; margin-left : 8px ; } </style> |
JavaScript代码:
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
|
<script> //显示第几张图片 var count = 1; //时间 var time = null ; //图片列表 var imglist = document.getElementById( "img-div" ).getElementsByTagName( "img" ); //圆点列表 var cirlist = document.getElementById( "cir-div" ).getElementsByTagName( "div" ); //展示对应的图片和点亮对应的圆点 function show(x) { for ( var i = 0; i < imglist.length; i++) { if (x == i + 1) { //显示图片 imglist[i].style.display = "block" ; //圆点点亮 cirlist[i].style.backgroundColor = "#fff" ; } else { imglist[i].style.display = "none" ; cirlist[i].style.background = "rgba(255, 255, 255, .4)" ; } } } //定时轮播图片(每3秒切换一张图片) function doStart() { if (time == null ) { time = setInterval( function () { count++; show(count); if (count >= 8) { count = 0; } }, 3000); } } //停止轮播图片 function doStop() { if (time != null ) { clearInterval(time); time = null ; } } //鼠标移到圆点上图片会相应切换,并且之后会点亮下一个圆点 而不是未移到圆点前的下一个圆点 function doMove(x) { show(x); //将位置赋给count,图片就会从该图片的下一张开始切换 count = x; //当鼠标移到最后一个圆点时,需要将count变为0,不然执行doStart()里的count++,count就会变为9,越界了 if (count == 8) { count = 0; } } /* 对于i 、count和show(x)里x的关系: i = [0,7]; x = [1,8]; count = [1,8]; */ //点击左边按钮向左切换图片 function doLeftClick() { for ( var i = 0; i < imglist.length; i++) { //判断当前在展示的是哪张图片 if (imglist[i].style.display == "block" ) { if (i == 0) { show(8); // 忘掉这句后,break会直接退出,当左按钮按到最右的圆点,会直接忽略圆点1,直接跳到圆点2 count = 0; //保证切换是3秒钟 doStop(); doStart(); break ; } show(i); count = i; //保证切换是3秒钟 doStop(); doStart(); break ; } } } //点击右边按钮向右切换图片 function doRightClick() { for ( var i = 0; i < imglist.length; i++) { //判断当前在展示的是哪张图片 if (imglist[i].style.display == "block" ) { if (i == 7) { show(1); count = 1; doStop(); doStart(); break ; } show(i + 2); count = i + 2; //就不会出现切换到没有图片的情况 if (count >= 8) { count = 0; } doStop(); doStart(); break ; } } } doStart(); //默认打开页面显示的是第一张图片 //(不加,会出现第1个圆点亮也就是刚打开页面时,左按钮没反应) doMove(1); </script> |
遇到的难点:
虽说轮播图看起来还蛮简单的,但实现起来还挺多问题的。不过我发现的都解决掉了。
- 圆点与按钮放置在图片上
- 自动切换图片了但对应的圆点没有点亮
- 鼠标移到圆点上图片切换了,但下一个自动点亮的圆点却是未移到圆点前的下一个
- 第1个圆点亮也就是刚打开页面时,左按钮没反应
- 当左按钮按到最右的圆点,会直接忽略圆点1,直接跳到圆点2
- 在最后一个圆点时点击右按钮时,会出现切换到没有图片的情况
- 点左按钮切换时间大概2秒,点右按钮切换时间大概5秒,时间并没有达到标准的3秒
不过我都解决啦!
最大的感触就是刚解决掉一个bug正沾沾自喜时,又来一个bug。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持服务器之家。
原文链接:https://blog.csdn.net/weixin_43771998/article/details/113971007