js知名网站建设定制的三种实现方式
1、替换scr(入门级)
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> .wrapper{ width: 600px; height: 350px; margin: 0 auto; position: relative; } img{ width: 100%; height: 100%; } .btn{ width:150px; display: flex; justify-content: space-around; position: absolute; left:225px; bottom:10px; } .btn span{ display: block; width:15px; height:15px; border: 3px solid white; border-radius: 50%; } .active{ background-color: red; } </style> </head> <body> <div class="wrapper"> <img src="./imgs/1.png" alt=""> <div class="btn"> <span class="active"></span> <span></span> <span></span> <span></span> <span></span> </div> </div> <script> var _img=document.querySelector("img"); var _wrapper=document.querySelector(".wrapper"); var _spots=document.querySelectorAll(".btn span"); var imgs=['./imgs/1.png','./imgs/2.png','./imgs/3.png','./imgs/4.png','./imgs/5.png'] //自动播放 autoplay(); var id; var index=1; function autoplay(){ id=setInterval(function(){ _img.src=imgs[index]; //知名网站建设定制控制小圆点 spots(); index++; if(index>=5){ index=0; } },2000) } //小圆点变化 function spots(){ for (var i = 0; i < _spots.length; i++) { if(i==index){ _spots[i].className="active" }else{ _spots[i].className="" } } } //悬浮时停止 _wrapper.onmouseover=function(){ clearInterval(id); } //离开时继续 _wrapper.onmouseout=function(){ autoplay(); } </script> </body></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
效果图:
2、滚动条（进阶版）
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title></title> <style type="text/css"> .wrapper { width: 900px; height: 350px; overflow: hidden; overflow: auto; margin: 0 auto; } img { width: 900px; height: 350px; } .contain { display: flex; width: 5400px; } </style></head><body> <div class="wrapper"> <div class="contain"> <img src="./img/10011.jpg" /> <img src="./img/10012.jpg" /> <img src="./img/10013.jpg" /> <img src="./img/10014.jpg" /> <img src="./img/10015.jpg" /> <img src="./img/10011.jpg" /> </div> </div> <script> var _wrapper = document.querySelector(".wrapper"); var index = 0; var num = setInterval(function () { //滚动一张 var moveLength = 0; //用标识是否走完一张 var id = setInterval(function () { _wrapper.scrollLeft += 12; moveLength += 12 if (moveLength >= 900) { clearInterval(id); } }, 20) //一张需要2250毫秒 index++; // 走完所有下标和滚动都要从0开始 if (index >= 6) { index = 0; _wrapper.scrollLeft = 0; } }, 3000) </script></body></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
效果图：
3、定位（豪华版）
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title></title> <style type="text/css"> .wrapper { width: 900px; height: 350px; overflow: hidden; margin: 0 auto; position: relative; } img { width: 900px; height: 350px; } .contain { display: flex; width: 4500px; position: absolute; left: 0; top: 0; } .btn { width: 150px; display: flex; justify-content: space-around; position: absolute; left: 375px; bottom: 10px; } .btn span { display: block; width: 15px; height: 15px; border: 3px solid white; border-radius: 50%; } .wrapper a { text-decoration: none; font-size: 50px; color: red; position: absolute; top: 35%; } .wrapper a:nth-of-type(1) { left: 10px; } .wrapper a:nth-of-type(2) { right: 10px; } .active { background-color: red; } </style></head><body> <div class="wrapper"> <div class="contain"> <img src="./img/10011.jpg" /> <img src="./img/10012.jpg" /> <img src="./img/10013.jpg" /> <img src="./img/10014.jpg" /> <img src="./img/10015.jpg" /> </div> <div class="btn"> <span class="active"></span> <span></span> <span></span> <span></span> <span></span> </div> <a href="javascript:void(0);"><</a> <a href="javascript:void(0);">></a> </div> <script> var _wrapper = document.querySelector(".wrapper"); var _contain = document.querySelector(".contain"); var _btn = document.querySelector(".btn"); //下一张按钮 var _nextPic = document.querySelector(".wrapper a:nth-of-type(2)"); // 上一张按钮 var _prevPic = document.querySelector(".wrapper a:nth-of-type(1)"); var _btn = document.querySelector(".btn"); //获取所有小圆点 var _spots = document.querySelectorAll(".btn span"); // 下一张 _nextPic.onclick = function () { next_pic(); } var index = 0; function next_pic() { _contain.style.left = _contain.offsetLeft - 900 + "px"; if (_contain.offsetLeft <= -4500) { _contain.style.left = 0; } index++; if (index > 4) { index = 0; } spots(); } // 上一张 _prevPic.onclick = function () { prev_pic(); } function prev_pic() { _contain.style.left = _contain.offsetLeft + 600 + "px"; if (_contain.offsetLeft > 0) { _contain.style.left = -3600 + "px"; } index--; if (index < 0) { index = 4; } spots(); } //自动轮播 autoplay(); var id; function autoplay() { id = setInterval(function () { next_pic(); }, 2000) } //小圆点变化 function spots() { for (var i = 0; i < _spots.length; i++) { if (i == index) { _spots[i].className = "active" } else { _spots[i].className = "" } } } //悬停控制 _wrapper.onmouseover = function () { clearInterval(id); } _wrapper.onmouseout = function () { autoplay(); } //悬浮小圆点更新图片 _btn.onmouseover = function (event) { //获取悬浮的小圆点 var target = event.srcElement || event.target; if (target.nodeName == 'SPAN') { //查询小圆点下标 var n = Array.from(_spots).findIndex(function (tag) { return tag == target }) //更新下标 index = n; //更新位移 _contain.style.left = -900 * n + "px"; //更新颜色 spots(); } } </script></body></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
- 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
效果图：