原生js实现轮播图原理
轮播图的原理
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);
原生js实现轮播图原理的更多相关文章
- 原生js实现轮播图
原生js实现轮播图 很多网站上都有轮播图,但找到一个系统讲解的却很难,因此这里做一个简单的介绍,希望大家都能有所收获,如果有哪些不正确的地方,希望大家可以指出. 原理: 将一些图片在一行中平铺,然后计 ...
- 封装一个简单的原生js焦点轮播图插件
轮播图实现的效果为,鼠标移入左右箭头会出现,可以点击切换图片,下面的小圆点会跟随,可以循环播放(为了方便理解,没有补2张图做无缝轮播).本篇文章的主要目的是分享封装插件的思路. 轮播图我一开始是写成非 ...
- 原生js焦点轮播图
原生js焦点轮播图主要注意这几点: 1.前后按钮实现切换,同时注意辅助图2.中间的button随着前后按钮对应切换,同时按button也能跳转到相应的index3.间隔调用与无限轮播.4.注意在动画时 ...
- 原生JS实现轮播图的效果
原生JS实现轮播图的效果: 只要缕清了全局变量index的作用,这个轮播图也就比较容易实现了:另外,为了实现轮这个效果,有几处clearInterval()必须写上.废话不多说,直接上代码,修复了几个 ...
- 使用原生js将轮播图组件化
代码地址如下:http://www.demodashi.com/demo/11316.html 这是一个轮播图组件,这里是代码地址,需要传入容器的id和图片地址,支持Internet Explor ...
- 用原生js封装轮播图
原生js封装轮播图 对于初学js的同学来说,轮播图还是一个难点,尤其是原生js封装轮播图代码,下面是我之前做的一个轮播图项目中封装好的一些代码,有需要的同学可以看一下,有什么不懂的可以看注释,注释看不 ...
- 原生js焦点轮播图的实现
继续学习打卡,武汉加油,逆战必胜!今日咱们主要探讨一下原生js写轮播图的问题, 简单解析一下思路: 1,首先写好css样式问题 2,考虑全局变量:自动播放的定时器,以及记录图片位置的角标Index 2 ...
- 手把手原生js简单轮播图
在团队带人,突然被人问到轮播图如何实现,进入前端领域有一年多了,但很久没自己写过,一直是用大牛写的插件,今天就写个简单的适合入门者学习的小教程.当然,轮播图的实现原理与设计模式有很多种,我这里讲的是用 ...
- 原生js简单轮播图 代码
在团队带人,突然被人问到轮播图如何实现,进入前端领域有一年多了,但很久没自己写过,一直是用大牛写的插件,今天就写个简单的适合入门者学习的小教程.当然,轮播图的实现原理与设计模式有很多种,我这里讲的是用 ...
随机推荐
- 关键字: simpledateformat24小时 格式串
SimpleDateFormat 是 Java 中一个非常常用的类,该类用来对日期字符串进行解析和格式化输出 Era 标志符 Text AD y 年 Year 1996; 96 M 年中的月份 M ...
- HTML5学习总结——相关练习与项目
一.小米商城项目 第一天示例代码: <!DOCTYPE html> <html lang="en"> <head> <meta chars ...
- write函数过程解析
write函数作为用户向终端或者文件进行写数据的重要函数,有着重要的作用. |------| |---------| |---------| |----------| | wri ...
- Error Note1:错误修复笔记
1.遍历同时修改数组内容导致崩溃 bugly上bug提醒如下图所示,经检查发现,可能是页面上数据加载惹得祸. 页面加载过程是这样的,首先进入页面,初始化页面,将本地数据加载到array中刷新table ...
- #leetcode刷题之路35-搜索插入位置
给定一个排序数组和一个目标值,在数组中找到目标值,并返回其索引.如果目标值不存在于数组中,返回它将会被按顺序插入的位置.你可以假设数组中无重复元素. 示例 1:输入: [1,3,5,6], 5输出: ...
- 【算法笔记】B1010 一元多项式求导
1010 一元多项式求导 (25 分) 设计函数求一元多项式的导数.(注:xn(n为整数)的一阶导数为nxn−1.) 输入格式: 以指数递降方式输入多项式非零项系数和指数(绝对值均为不超过 ...
- C++常用的系统函数
数学<math.h>: 1 三角函数 double sin (double); double cos (double); double tan (double); 2 反三角函数 doub ...
- MySQL高可用架构故障自动转移插件MHA
mha高可用架构是目前mysql高可用故障转移比较成熟的解决方案.MHA插件复杂监控mysql主节点的健康情况.在主节点宕机后,MHA把binlog通过ssh传到从节点进行重做补齐.并提升其中一个从节 ...
- operator.attrgetter() 进行对象排序
## 使用operator.attrgetter() 进行对象排序 from operator import attrgetter class Student: def __init__(self, ...
- php 算法(二分法)只适用于有序表,且限于顺序存储结构
function demo($array,$low,$high,$k){ if($low<=$high){//判断该数组是否存在 $mid = intval(($low+$high)/2 ); ...