原生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简单轮播图 代码
在团队带人,突然被人问到轮播图如何实现,进入前端领域有一年多了,但很久没自己写过,一直是用大牛写的插件,今天就写个简单的适合入门者学习的小教程.当然,轮播图的实现原理与设计模式有很多种,我这里讲的是用 ...
随机推荐
- Go 语言开始
尝试了LiteIDE碰到调试问题无法解决,只有换成了vscode. vscode有个问题, golang.org/x/ 这个包名下的包都下载不了,需要到 https://github.com/gola ...
- MVC验证码生成类库
public class ValidateCode { /// <summary> /// 验证码的最大长度 /// </summary> public int MaxLeng ...
- Visual Studio 中常用的快捷键
项目相关的快捷键 Ctrl + Shift + B = 生成项目 Ctrl + Alt + L = 显示 Solution Explorer(解决方案资源管理器) Shift + Alt+ C = 添 ...
- ucos问题
1. 在系统初始化之前,不要调用系统函数,如下: void OSRun(void) { SYSTICK_InternalInit(1); // 1ms time tick SYSTICK_IntCmd ...
- .net 网站中如何动态播放音乐,页面如何播放音乐
向别人请教有好处也有坏处,好处是你可以相对比较快的知道要点,坏处就是你TM的发现你弄了那么久都是白弄. 昨天今天一直在找一个问题的解决方案,我的问题描述大概是这样子的:我用vs2012开发的.net网 ...
- JAVA正则表达式校验qq号码
/* * 校验qq号码* 要求必须是5-15位* 0不能开头* 必须都是数字 */ (1)使用正则表达式校验qq号码 (2)方式2
- JS中的原型规则与原型链
1. 原型规则 A. 所有的引用类型(数组.对象.函数),都具有对象特性,即可自由扩展属性: var arr = []; arr.a = 1;B. 所有的引用类型(数组.对象.函数),都有一个_pro ...
- FreeImage 生成带透明通道的GIF
主要方法: 加载图像及读取参数 FreeImage_Load FreeImage_GetWidth FreeImage_GetHeight FreeImage_Allocate FreeImage_G ...
- 在IDEA中关于项目java版本问题
在IDEA中关于项目java版本问题 当出现错误如:java无效的源发行版11或IDEA Error:java:Compliation failed:internal java complier er ...
- 编程界失传秘术,SSO单点登录,什么是单点,如何实现登录?
单点登录 多系统,单一位置登录,实现多系统同时登录的一种技术. 常出现在互联网应用和企业级平台中. 如:京东. 单点登录一般是用于互相授信的系统,实现单一位置登录,全系统有效的. 三方登录:某系统,使 ...