原创《前端无缝焦点轮播原理之图形化和JaScript实现》：此文是一篇前端论文范文,为你的毕业论文写作提供有价值的参考。
摘 要：该文就主要针对前端开发中见得最多用得最普遍的无缝焦点轮播页面效果,使用图示法还原其执行原理,用原生Jascript语言结合css3样式与HTML结构进行实现,向读者揭示了绚丽多彩的前端特效的冰山一角.
关键词：添加图片法；定位法；DOM-CSS；relative；static
中图分类号：TP311 文献标识码：A 文章编号：1009-3044（2018）03-0187-02
当前的世界是互联网的世界,当前的时代是互联网+的时代,互联网的发展用日新月异,突飞猛进形容一点不为过,各种新技术,新标准层出不穷,各大互联网公司越来越重视web产品的前端重构与开发,页面交互也越来越丰富,视觉效果是越来越绚丽,整个前端开发发展势头迅猛.本文就以前端开发中见得最多用得最普遍的无缝焦点轮播页面效果为例,使用图示法还原其执行原理,用原生Jascript语言结合css3样式与HTML结构进行实现,揭开前端开发奥妙冰山一角.
1 无缝轮播概念
所谓无缝焦点轮播主要是指图片从左到右或从上到下运动时,从一端切换到另一端时的切换是无间断的连续播放.
2 原理解析
我們常看到的无缝轮播的实现方法主要由两种,1）添加图片法,2）定位法,下面文章分别针对这两种方法从不同的角度进行剖析.
1） 添加图片法
所谓添加图片法就是在原来图片的最开头添加上原来的最后一张图片,将原来第一张图片再添加一份到最后面,我们以左右运动为例进行剖析,分别代表原来第一第二第三第四第五张图片,容纳所有图片的矩形的大矩形称之为“盒子”,其中最高的那个固定位置的矩形表示可视区,添加图片后,布局上的变化用示意为：
描述：图1中状态1表示目前运动到第5张图片显示的状态,状态2表示在该方法中,让整个“盒子”正常往左运动,显示出添加的图片1,在这个运动刚刚完成后显示为状态2时,通过DOM-CSS技术修改整个“盒子”的left属性值到状态3,是的,在这个方法中从状态2到状态3的过程便是整个无缝切换的核心与本质.同样的道理,我们用图示剖析一下从左往右如何无缝切换,如图2所示：状态1到状态2“盒子”都正常运动,在运动到状态2后,立刻通过DOM-CSS改变“盒子”的left属性值为状态3,不知不觉间实现无缝的切换.无论是图1还是图2,我们看到在从状态2到状态3的变化过程都是通过DOM-CSS来完成的,因为可视区是没有变化的,如图1中状态2到状态3时可视区一直都是显示第1张图片,图2中一直都是显示第5张图片,用户的眼睛根本不会察觉到两个状态切换的瞬间,所谓无间断就这样实现了.
2） 定位法
所谓定位法顾名思义就是通过改变定位的方式实现无间断.在该方法中,不用改变布局,不用改变CSS,主要是在实现过程中通过DOM-CSS技术,结合对定位方式relative的理解来实现,本文仍然结合图片来揭示该方法原理,如图3所示：在“盒子”运动到状态1时,利用DOM-CSS将第一张图片的定位方式改为relative,同时修改第一张图片的left属性值,如状态2的所示,然后“盒子”正常运动到状态3,此时显示区显示的是第一张图片,在这个状态刚到达的同时,还是通过DOM-CSS将第一张图片的定位方式还原为默认static方式,此时就显示为状态4.
与此同时,修改“盒子”的left属性值,如图3中状态5所示,我们发现在从状态3到状态5的过程中,显示区一直显示的是第一张图片,其中的状态4中的显示区为空白是通过DOM-CSS操作的,用户的肉眼根本无法发现,“他”的眼里一直只有第一张图片,从而巧妙实现“无间断”.从左到右的无间断切换图示如图4所示,关键变化技巧仍然在状态2到状态5的过程中,其一是要明白relative定位的本质,relative定位的对象仍然在文档流中的,其二,抓住时机修改端头的图片的定位方式和left属性值以及盒子的left属性值.
3 JaScript+CSS+HTML实现
针对以上两种无间断切换的剖析,下面用Jascript进行实现.
1） 添加图片法实现：
添加的图片分别体现在添加了底纹的LI语句
[HTML布局]
前端论文参考资料：
结论：前端无缝焦点轮播原理之图形化和JaScript实现为适合前端论文写作的大学硕士及相关本科毕业论文，相关前端开题报告范文和学术职称论文参考文献下载。
