本文实例为大家分享了JavaScript实现简单的轮播图的具体代码,供大家参考,具体内容如下
js轮播图实现思路
1、先获取元素 盒子 左右按钮
2、鼠标经过 显示/隐藏 左右侧按钮
3、动态生成小圆圈、 添加自定义属性
4、小圆圈点击事件 添加current类名
5、添加动画事件 animate 等于 -索引号*focusWidth
6、克隆第一张图片到最后面
7、添加右侧/左侧按钮点击事件
8、设置定时器 手动调用右侧按钮点击事件
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
|
<!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/index.css" > < script src = "js/index.js" ></ script > </ head > < body > < div class = "focus" > < a href = "javascript:;" class = "arrow_r" >></ a > < a href = "javascript:;" class = "arrow_l" > <</ a > < ul > < li > < a href = "" >< img src = "images/focus.jpg" alt = "" ></ a > </ li > < li > < a href = "" >< img src = "images/focus1.jpg" alt = "" ></ a > </ li > < li > < a href = "" >< img src = "images/focus2.jpg" alt = "" ></ a > </ li > < li > < a href = "" >< img src = "images/focus3.jpg" alt = "" ></ a > </ li > </ ul > < ol class = "circle" > </ ol > </ div > </ body > </ html > |
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
|
* { padding : 0 ; margin : 0 ; } li { list-style : none ; } img { border : 0 ; vertical-align : top ; } a { text-decoration : none ; } .focus { position : relative ; width : 721px ; height : 455px ; margin : 100px auto ; overflow : hidden ; } .focus ul { position : absolute ; top : 0 ; left : 0 ; width : 600% ; } .focus ul li { float : left ; } .arrow_r, .arrow_l { display : none ; position : absolute ; top : 50% ; transform: translateY( -50% ); width : 40px ; height : 40px ; line-height : 40px ; text-align : center ; font-size : 24px ; background : rgba( 0 , 0 , 0 , . 2 ); color : #fff ; z-index : 1 ; } .arrow_r { right : 0 ; } . circle { position : absolute ; bottom : 10px ; left : 50px ; } . circle li { float : left ; width : 8px ; height : 8px ; border : 2px solid rgba( 255 , 255 , 255 , . 5 ); border-radius: 50% ; margin : 0 3px ; cursor : pointer ; } .current { background-color : #fff ; } |
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
|
window.addEventListener( 'load' , function () { //获取元素 var focus = document.querySelector( '.focus' ); var arrow_r = document.querySelector( '.arrow_r' ); var arrow_l = document.querySelector( '.arrow_l' ); var focusWidth = focus.offsetWidth; // 鼠标经过focus盒子 显示/隐藏 左右侧按钮 暂停轮播 focus.addEventListener( 'mouseenter' , function () { arrow_r.style.display = 'block' ; arrow_l.style.display = 'block' ; clearInterval(timer); timer = null ; }); focus.addEventListener( 'mouseleave' , function () { arrow_r.style.display = 'none' ; arrow_l.style.display = 'none' ; timer = setInterval( function () { //调用点击事件 arrow_r.click(); }, 2000); }); //动态生成小圆圈 var ul = focus.querySelector( 'ul' ); var ol = focus.querySelector( '.circle' ); for ( var i = 0; i < ul.children.length; i++) { var li = document.createElement( 'li' ); li.setAttribute( 'index' , i); ol.appendChild(li); //小圆圈点击事件 li.addEventListener( 'click' , function () { for ( var i = 0; i < ol.children.length; i++) { ol.children[i].className = '' ; } var index = this .getAttribute( 'index' ); num = index; circle = index; this .className = 'current' ; animate(ul, -index * focusWidth); }) } ol.children[0].className = 'current' ; //克隆第一张图片放到最后一张 var fis = ul.children[0].cloneNode( true ); ul.appendChild(fis); //右侧按钮点击事件 var num = 0; var circle = 0; arrow_r.addEventListener( 'click' , function () { if (num === ul.children.length - 1) { ul.style.left = 0; num = 0; } num++; animate(ul, -num * focusWidth); circle++; if (circle === ul.children.length - 1) { circle = 0; } for ( var i = 0; i < ol.children.length; i++) { ol.children[i].className = '' ; } ol.children[circle].className = 'current' ; }); //左侧按钮点击事件 arrow_l.addEventListener( 'click' , function () { if (num == 0) { num = ul.children.length - 1; ul.style.left = -num * focusWidth + 'px' ; } num--; animate(ul, -num * focusWidth); circle--; circle = circle < 0 ? ol.children.length - 1 : circle; // 调用函数 circleChange(); }); //清除其余小圆圈的current类名 function circleChange() { for ( var i = 0; i < ol.children.length; i++) { ol.children[i].className = '' ; } // 留下当前的小圆圈的current类名 ol.children[circle].className = 'current' ; } //动画函数 function animate(obj, target, callback) { clearInterval(obj.timer); obj.timer = setInterval( function () { var step = (target - obj.offsetLeft) / 10; step = step > 0 ? Math.ceil(step) : Math.floor(step); if (obj.offsetLeft == target) { clearInterval(obj.timer); callback && callback(); } obj.style.left = obj.offsetLeft + step + 'px' ; }, 15); } //自动轮播放轮播图 var timer = setInterval( function () { //调用点击事件 arrow_r.click(); }, 2000); }); |
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持服务器之家。
原文链接:https://blog.csdn.net/llt299022/article/details/114235151