热门关键字:
jquery > jquery教程 > jquery教程 > js jquery封装无缝轮播功能

js jquery封装无缝轮播功能

239
作者:管理员
发布时间:2021/6/1 17:43:46
评论数:0
转载请自觉注明原文:http://www.jq-school.com/Show.aspx?id=4842
  css相比较于使用js实现像轮播图这种简单的动画效果有着很大的优势。


  在表面上看来,css动画效果会比js动画效果更加流畅,且不会出现像js动画一样出现各种由误差导致的显示效果问题。


  在更深层次看来,css操作transform实现的动画效果浏览器会对其进行优化,且能够让浏览器在合成器线程中进行css动画效果操作,而不是去和其他js、ui操作抢夺浏览器主线程资源,从而避免造成各种误差导致的问题。


  因为js是单线程的,在js中同时执行定时器,js动画这种会占用资源比较多的操作时,尤其是在同时还执行其他js操作时,必定会对定时器或动画造成一定的误差影响。


  虽然这些误差时间和原操作执行时间相比显得十分微小,但是这已经足以在网页中产生可以被看到的误差效果了。


  在该程序中便有时会出现这种由误差导致的错误动画效果,即使这种情况所造成的影响并不大,但如果放在真正商用的网页上,依旧会给用户带来一定的不好的体验。


  js动画和css动画都有他们各自的优缺点,但是对于像轮播图这种不需要复杂控制的动画效果的功能来说,使用css实现动画效果是一个更好的选择。


  但是,即使我们知道这一点,在我们学习,而不是工作的过程中,可能依旧会遇到需要使用js动画来实现轮播功能的时候。或许是想要亲自手写一个js轮播来体会轮播的思想和js和css实现轮播的区别,也或许是作业要求。这都要求我们在即使知道js动画并不适用于轮播效果的情况下依旧要使用js来写一个轮播功能。


  这个轮播程序便是我在出于这样的目的时写出的。


  在之前我使用原生js写过一个无缝轮播功能,在现在看来,那一个程序中存在着种种严重的问题并且有些地方都很不规范。


  比如js动画函数的设计的问题,使用的等值变换的方法实现js动画的方法是存在着严重问题的。


  而该程序因为是在使用了jquery的基础上写成的,所以关于js动画的部分直接使用了jquery的animate动画。


  无缝轮播的实现方式有很多种,而由无缝轮播的特性可以得知,这样的程序所使用到的实现方式是需要通过某种手段达到一种类似循环的播放效果的。


  而在之前我一直使用的都是一种交换数组中的轮播元素的方式实现的这种效果。而在这个使用js、jquery实现的无缝轮播程序中,我则是使用了封装一个双向循环链表容器的方式实现的这种轮播元素循环的效果。


  该程序可以实现设置轮播数据、设置自动轮播、设置侧边按钮、设置轮播按钮、设置触发按钮事件、设置鼠标移入后停止自动轮播盒子功能,这些都是轮播图的最为基本的功能。


  另外,因为其实现的原理,还可以实现通过向对象中传入easing属性值:linear(匀速)swing(变速)以达到实现变换的轮播速度的效果。


  实现该程序的核心,就是封装一个“能够根据轮播方向和轮播下标来实现轮播效果”的函数,然后其他所有的功能都是在这个核心的函数之上进行封装的。


  虽然该程序对比我之前写过的轮播程序已经进行了一定的优化,但是其毕竟只是我一个初学者以学习为目的写出的程序,还依然存在着很多不规范和bug的地方。




如果您觉得本文的内容对您的学习有所帮助:支付鼓励



关键字:jquery
友荐云推荐