本文實例為大家分享了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
