电商商城定制开发先上效果图：
电商商城定制开发实现的功能有：
（1）电商商城定制开发点击下方小圆点可以实电商商城定制开发现图片切换
（2）电商商城定制开发点击左右的按键可以实现图片切换
（3）自动轮播图片
（4）鼠标放上去停止自动播放，鼠标离开自动播放
代码实现原理：
- 核心原理就是得到当前展示的图片的索引index,向左滑动则index–,向右滑动则index++,图片滑动实际上是ul的移动，移动的目标位置就是index*图片的宽度。
完整代码：
<!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> <style> * { margin: 0; padding: 0; } li { list-style: none; } .big_box { position: relative; width: 500px; height: 400px; margin: 100px auto; overflow: hidden; } .big_box ul { position: absolute; left: 0; width: 600%; height: 400px; } .big_box ul li { float: left; } .big_box ul li img { width: 500px; height: 400px; } .left { position: absolute; top: 50%; left: 0; transform: translateY(-50%); background-color: rgba(255, 255, 255, .5); width: 30px; height: 30px; line-height: 30px; text-align: center; } .right { position: absolute; top: 50%; right: 0; transform: translateY(-50%); background-color: rgba(255, 255, 255, .5); width: 30px; height: 30px; line-height: 30px; text-align: center; } .big_box ol { position: absolute; bottom: 0; /* 这里别给ol限制宽度，让小圆圈的个数自动把ol撑大 */ left: 50%; transform: translateX(-50%); height: 10%; line-height: 10%; text-align: center; } .big_box ol li { float: left; width: 20px; height: 20px; background-color: rgba(0, 0, 0, .5); border-radius: 50%; margin-left: 5px; } .big_box ol .current { background-color: rgb(211, 29, 29); } .left, .right, ol li { cursor: pointer; } </style></head><body> <div class="big_box"> <!-- 轮播的图片 --> <ul> <li> <img src="imgs/pic1.png" alt=""> </li> <li> <img src="imgs/pic2.png" alt=""> </li> <li> <img src="imgs/pic3.png" alt=""> </li> </ul> <!-- 左右按键 --> <div class="left"><</div> <div class="right">></div> <!-- 小圆圈 --> <ol> </ol> </div> <script> var timer; var big_box = document.querySelector('.big_box'); var ul = big_box.querySelector('ul'); var ol = big_box.querySelector('ol'); var lis_img = ul.querySelectorAll('li'); var left = document.querySelector('.left'); var right = document.querySelector('.right'); var num = 0; //记录要滑到第几张图片 function animate(obj, target) { var timer1 = setInterval(function () { var current = obj.offsetLeft; var step = 10; step = current > target ? -step : step; // 下面要包括等于的情况，否则会发生抖动 if (Math.abs(current - target) <= Math.abs(step)) { clearInterval(timer1); obj.style.left = target + 'px'; } else { obj.style.left = current + step + 'px'; } }, 10) } //小圆圈样式改变 function circlechange(circles, circle) { if (circle == lis_img.length) { circle = 0; } //排他思想设置小圆圈样式 //排他思想第一步:先把所有的小圆圈样式去掉 for (var i = 0; i < circles.length; i++) { circles[i].className = ""; } //排他思想第二步:把当前图片对应的小圆圈设置样式 circles[circle].className = "current"; } //在页面刚加载进来就执行代码 window.addEventListener('load', function () { //设置小圆点的个数 for (var i = 0; i < lis_img.length; i++) { var li = document.createElement('li'); ol.appendChild(li); // 给小圆圈添加自定义属性 li.setAttribute('index', i); //一开始第一个小圆圈就是被选中状态 if (i == 0) { li.className = "current"; } //给小圆圈添加点击处理事件 li.addEventListener('click', function () { //排他思想实现小圆圈样式改变 for (var j = 0; j < ol.children.length; j++) { ol.children[j].className = ""; } this.className = "current"; //实现点击小圆圈后图片滑动 var index = this.getAttribute('index'); animate(ul, -index * big_box.offsetWidth); // 在图片滑动的同时对应的小圆圈样式也要发生改变，所以调用animate函数同时调用circlechange函数 circlechange(circles, index); }) } //为了实现无缝衔接的切换图片，要把第一张图片克隆到最后一张图片的附近 var circles = ol.querySelectorAll('li'); // cloneNode函数若括号里面是true，则是深拷贝，false则是浅拷贝 var li_img = ul.children[0].cloneNode(true); ul.appendChild(li_img); //点击右箭头向右滑动 right.addEventListener('click', function () { //下面if代码是实现向右滑动的无缝衔接，不懂的建议自己手动模拟一遍 if (num >= lis_img.length) { num = 0; //注意改变属性left的值后面一定要跟px，否则没有效果 ul.style.left = 0 + 'px'; } num++; animate(ul, -num * big_box.offsetWidth); circlechange(circles, num); }) //点击左箭头向左滑动 left.addEventListener('click', function () { //下面if代码是实现向左滑动的无缝衔接，不懂的建议自己手动模拟一遍 if (num <= 0) { num = lis_img.length; ul.style.left = -lis_img.length * big_box.offsetWidth + 'px'; } num--; animate(ul, -num * big_box.offsetWidth); circlechange(circles, num); }) //实现自动播放----因为自动播放的功能和向右滑动的功能一样，所以直接调用向右滑动的函数 timer = setInterval(function () { right.click(); }, 2000) //鼠标放到盒子上停止自动播放 big_box.addEventListener('mouseover', function () { clearInterval(timer); }) //鼠标离开自动播放 big_box.addEventListener('mouseout', function () { clearInterval(timer); //在重新创建一个定时器时最好先清除一下定时器 timer = setInterval(function () { right.click(); }, 2000) }) }) </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
- 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
测试的三张图片：
写轮播图代码踩的一些坑和体会：
(1)重新setInterval创建定时器之前最好先清除同名定时器，否则轮播图片会发生抖动
(2)若有多个定时器，注意定时器的变量名最好区分开，这样或者再创建不会混乱
(3)核心功能，比如创建小圆点，左右键实现滑动等的代码最好放在load里面，这样页面一加载就可以重新执行