轮播图的原理
1. 图片移动实现原理:
利用浮动将所有所有照片依次排成一行, 给这一长串图片添加一个父级的遮罩, 每次只显示一张图, 其余的都隐藏起来. 对图片添加绝对定位, 通过控制 left 属性, 实现照片的移动.
2. 图片移动动画原理:
从 a 位置移动到 b 位置, 需要先计算两点之间的差值, 通过差值和时间间隔, 计算出每次移动的步长, 通过添加定时器, 每次移动相同的步长, 实现动画效果.
3. 图片定位停止原理:
每一张照片都有相同的宽度, 每张照片都有一个绝对的定位数值, 通过检测定每次移动后, 照片当前位置和需要到达位置之间的距离是否小于步长, 如果小于, 说明已经移动到位, 可以将定时器清除, 来停止动画.
4 图片切换原理:
在全局设置一个变量, 记录当前图片的位置, 每次切换或跳转时, 只需要将数值修改, 并调用图片页数转像素位置函数, 再调用像素运动函数即可.
5. 自动轮播原理:
设置定时器, 一定时间间隔后, 将照片标记加 1, 然后开始切换.
6. 左右点击切换原理:
修改当前位置标记, 开始切换. 这里需要注意与自动轮播之间的冲突. 当点击事件触发之后, 停止自动轮播计时器, 开始切换. 当动画结束后再次添加自动轮播计时器.
7. 无缝衔接原理:
需要无缝衔接, 难度在于最后一页向后翻到第一页, 和第一页向前翻到最后一页. 由于图片的基本移动原理. 要想实现无缝衔接, 两张图片就必须紧贴在一起. 所以在第一张的前面需要添加最后一张, 最后一张的后面需要添加第一张.
7. 预防鬼畜原理:
始终保证轮播图的运动动画只有一个, 从底层杜绝鬼畜. 需要在每次动画开始之前, 尝试停止动画定时器, 然后开始为新的动画添加定时器.
8. 预防暴力点击原理:
如果用户快速点击触发事件, 会在短时间内多次调用切换函数, 虽然动画函数可以保证, 不会发生鬼畜, 但在照片从最后一张到第一张的切换过程, 不会按照正常的轮播, 而是实现了跳转. 所以需要通过添加口令的方式来, 限制用户的点击. 当用户点击完成后, 口令销毁, 动画结束后恢复口令.
9. 小圆点的位置显示原理:
每次触发动画时, 通过全局变量标记, 获取当前页数, 操作清除所有小圆点, 然后指定一页添加样式.
10. 点击触发跳转的原理:
类似于左右点击触发, 只是这是将全局页面标记, 直接修改, 后执行动画. 需要避免与自动轮播定时器的冲突.
三, 技术细节的实现
1. 无缝切换
- if(Math.abs(y - parseInt(show.style.left)) < Math.abs(step)){
- show.style.left = y +"px";
- if(num == 6) {
- show.style.left = "-690px";
- }
- if(num == 0) {
- show.style.left = "-3450px";
- }
- }
首先判断图片的位置, 是否移动到位. 当满足当前位置, 与预定位置之间的距离小于一步时, 认定为移动到位, 并把图片直接定位到预定位置. 然后判断, 图片的位置是否需要跳转.
ps: 这里一定要在图片运动函数结束后, 在进行跳转.
2. 预防鬼畜
- try{
- clearInterval(timer);
- }catch{
- }
- step = (y-x)/100;
- var timer = setInterval(function(){
- show.style.left = parseInt(show.style.left) + step +"px";
- if(Math.abs(y - parseInt(show.style.left)) < Math.abs(step)){
- show.style.left = y +"px";
- clearInterval(timer);
- }
- },1);
来源: http://www.bubuko.com/infodetail-2873442.html