你的位置:首页 > 软件开发 > Java > javascript 图片幻灯片切换类:XScroll.js发布

javascript 图片幻灯片切换类:XScroll.js发布

发布时间:2012-03-21 17:00:41
首先说明,这是一个未完成版本。最近一直在写这个XScroll.js,一直纠结于要不要发布出来,因为每次要发布的时候,我就觉得还没有写完善,还有bug,像个半吊子产品。但这两天我觉得,自己的javascript知识还是不足,如果等这个作品完善了才发布的话,我很担心要等到世界末日那天了。于是,我决定发布出来,当作学习过程的展示吧。XScroll.js介绍:XScroll是一个实现图片幻灯片切换的js类 ...

首先说明,这是一个未完成版本。

最近一直在写这个XScroll.js,一直纠结于要不要发布出来,因为每次要发布的时候,我就觉得还没有写完善,还有bug,像个半吊子产品。但这两天我觉得,自己的javascript知识还是不足,如果等这个作品完善了才发布的话,我很担心要等到世界末日那天了。于是,我决定发布出来,当作学习过程的展示吧。

XScroll.js介绍:

XScroll是一个实现图片幻灯片切换的js类.目前支持(伪)13种切换效果。总代码量10KB。

XScroll.js示例页

这个类起源于我去年在淘宝电器城发现的效果,我发现他的幻灯片一直朝上滚动,就算从最后一张切换至第一张,也是向上。我对这种效果非常好奇,当时研究了半天还是不明所以。于是今年我就着手自己制作了。现在终于实现了他的效果,结果丫的现在又改版了!

虽然代码不一定优良,但说不定我的思路会带给你灵感(自我感觉良好...),从而让高人们来实现我没完成的目标。

要使用XScroll来实现图片切换,你的html结构应该类似:

<ul id="idSlider4">	<li><a href="http://jo2.org/"><img src='/images/loading.gif' data-original="s3.jpg"/></a></li>	<li><a href="http://jo2.org/"><img src='/images/loading.gif' data-original="s4.jpg"/></a></li>	<li><a href="http://jo2.org/"><img src='/images/loading.gif' data-original="s5.jpg"/></a></li></ul>

此时,你只需要下面一句代码,就能实现幻灯片切换效果:

var x3 = XScroll('idSlider4',{direct:2,how:3,fps:50,delay:3000,Tween:Tween.QuartOut});

XScroll.js参数说明:

  1. 基本参数:XScroll(id,{})。其中id是一个元素的id值,字符串;第二个参数是一个对象,用来设置切换效果.以下均为第二个参数的子参数
  2. how:切换效果。0淡入淡出,1两张图片同时滚动,2当前图片不动,下一张图片覆盖上来,3当前图片飞走,显示出下一张;4(未实现)当前图片与下一张图片反向拉伸,然后回切,完成切换
  3. direct:方向,值为0123,分别表示左上右下,默认为0.在how参数不为0时有效
  4. delay:自动滚动间隔时间。默认为4000
  5. step:滚动步长。当滚动方向是水平时,step会默认为slider元素的offsetWidth;当滚动方向是垂直时,则默认为高度。当然,也可以自己设置
  6. pager:值应该是一个元素的id,指定slider的页码翻页元素。指定后XScroll会为此标签的第一层子元素添加跳转函数
  7. fps:帧率。默认为40
  8. auto:自动滚动。默认为true.
  9. ing:切换效果持续时间,越小则切换时间越短。默认为50
  10. tween:缓动公式。这需要搭配缓动公式集合使用,如我收集的缓动公式
  11. pause:当鼠标指到slider上面时是否触发暂停。默认为true
  12. event:触发页码翻页的事件。默认是mouseover(建议不要使用奇怪的事件)

先说说XScroll.js现在已经实现的功能:

  1. 一个可复用的幻灯片切换类,已经基本完成
  2. 目前支持4种特效
  3. 凡是涉及到滚动的,均各自带有四个方向,左上右下(算上方向,是否可以说XScroll支持13种特效了?)
  4. 支持页码翻页切换,也可扩展出上下页按钮
  5. 支持自定义页码切换事件(不过只推荐click,mouseover之类的)

再说说XScroll.js的特色:

  1. 始终朝1个方向滚动(意思是到了头不会回滚,不会变更方向),哪怕只有两张图片互相切换,也是始终朝设定的方向一直滚动
  2. 不论下一张是第几张图片,都是一步到位——例如从第1张滚动到第5张,也是一个步长即可完成,不会跨越他们中间的图片
  3. 声明时无需写new(根据snandy“读jQuery”系列的启发)

再说说XScroll.js现在还没有将来要实现的功能:

  1. 更多的图片切换效果
  2. 更多的方向,即把现在的4个方向扩展成8个方向,加入左上,右上,左下,右下
  3. 会添加一个让切换效果随机的参数
  4. 支持多张图片同时显示并滚动,比如同时显示三张图,且同时滚动三张图,或显示三张图滚动还是一张图——这一点功能很难,我怀疑会推翻我现在的架构
  5. 更高的代码执行效率

下面说说我写XScroll.js的部分思路,废话较多,谨慎阅读:

一,首先我要实现的效果是:一步到位。就是上面说的无论当前图片与下一张图片间隔有多少张图片,都是一次滚动即到达目的地。

我的思路是这样:所有图片绝对定位,当页面载入完成后进行初始化,显示出第1张图片,并绝对定位到当前坐标;当静止时,只显示当前图片,其余图片隐藏;当开始运动时,即刻将下一张图片显示出来,并设置起点为相应的坐标;当运动终结时,设置刚才的"下一张“图片为显示,其余图片隐藏。如此循环

这样做的优点:每张图片单独滚动/变化,可以实现很多不同的切换效果

缺点:如果同时滚动两张图片,并采用较复杂的缓动公式,可能出现两张图不同步,有空白,也就是效率问题。如果同时滚动三张图...4张...5张...不敢想象。所以现阶段只有用来制作单张图片的切换,唉

二,实现朝左上右下4个方向滚动(重点)

这个初看很容易,因为图片都是绝对定位,那么设置他的left,top,right,bottom值不就能实现朝4个方向滚动了?

其实这种实现方式有问题。因为可能css里初始设置了图片的left或top值,这时候再设置他的right和bottom就郁闷了:图片会同时保持left值与right值,或者图片只认left而不管right!

通常情况下初始设置left与top很常见,所以如果有这个bug的话,无疑会经常出现在使用者眼前。

所以我转变了一下思路:往左滚或右滚时(水平滚动),都通过设置left实现;垂直方向滚动时,则都通过设置top实现。这样就避免了前面的bug。

但怎么实现这个思路呢?需要做一连串的改动

无疑,方向还是4个,XScroll.js里的direct分别用0123来代表左上右下,其中我们知道,右与左相反,下与上相反。于是我设置了一个参数,就叫fan,当direct大于1时,即方向为→或者下,就是相反。如果不相反,则fan=1;反之则fan=-1.

代码:

this.direct = ['left','top'][drt % 2];		this.fan = (drt > 1) ? -1 : 1;

方向现在可以反过来了,但还有个问题,就是当方向相反时,图片滚动的起点和终点就反过来了。比如,图片向左滚动时,当前图片起点为0,终点为-step;但方向反过来向右时,当前图片的起点还是0,终点却变成了step.

这时候前面的变量fan就起作用了,根据direct设置fan的值为1或-1,再用他乘以step,就能得到当前图片的终点(或下一张图片的起点)

至于相应切换效果时当前图片与下一张图片的起止点,就需要你自己思考了。

三,优化淡入淡出效果的思路

这个思路见我上一篇文章:淡入淡出效果的思路

四,怎么判断运动是否完成

这个我实现的非常麻烦。迄今为止,XScroll.js里的切换运动包括淡入淡出和坐标位移,只有判断淡入淡出完成且坐标位移也完成了,才执行下一步操作。

比如设置一个表示透明操作进行中的变量叫fading,位移进行中的变量叫moving,当他们都为0时,则运动完成;但同时运动的有两张图,所以这个变量每张图都要1个...

这导致出现了更多的变量与更多的判断。以后我会尽量优化这块儿。


我觉得制作图片切换效果应该避免的:

1,应避免把图片等全部用JS输出的思路.理由:不利于seo,且对新手来说增加理解难度;

2,翻页的页码可以用JS输出,但我推荐事先用html写出来,然后用JS绑定事件即可。理由:插入页码时会循环操作DOM,降低了JS运行效率;而且,有点图片切换的页码很奇怪,可能并不是数字,而是一些说明文字。见示例页的仿淘宝电器城效果。


下面说说我在写Xscroll.js过程中的其他:

当代码基本完成时,我发现一个怪现象:我让XScroll运行着不管它,然后切换到其他标签页上网什么的,过一会儿切换回来,就看到图片们好像偷懒被发现了一样疯狂的同时滚动好几张,然后恢复正常。让我怀疑是不是我不在这个标签页的时候,图片根本就不切换。

这个症状直接导致IE6下卡到报错(不知道是不是因为IEtester模拟的IE6是不是效率更低)。

本来我怀疑是不是我源码里的闭包导致了这个问题,但我又发现好像除了闭包我没其他办法实现。无奈,我只有从其他方面优化效率。

后来,我通过IE6的报错发现,如果切换正在进行中还没完成就调用下一次切换,就会出错。于是**脆让他如果切换运动没有完成,则不进行下一次切换(其实这也合乎情理)。

然后,我发现前面说的症状就消失了。虽然有时候IE6下还是卡的一顿一顿的,但一直不会报错。


后记:

XScroll.js原发布帖

因为IEtester模拟的IE6不支持透明度,所以有关透明的切换效果不知道在IE6下是否准确;

思路(或者说架构)真的很重要;

以后我应该会为XScroll.js添加更多的特效;

我打算另外写一个类,用来实现我的另一种思路,且支持多张图片同时切换;XScroll.js,就用来制作单张图片切换效果吧。希望我能加油,希望所有coder们能走的更远。

其他作品:一个tab切换类及他的jQuery版

原标题:javascript 图片幻灯片切换类:XScroll.js发布

关键词:javascript,图片切换,XScroll.js

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。