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

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

XScroll.js示例页 Github地址

更新日志:

2012-4-23:

bug修复,说明见:我的javascript图片切换类系列重大更新

改进了动画函数效率,现在的动画函数支持同时对几个DOM元素进行动画操作了;而且,执行效率大幅度提高,不会因为复杂的缓动公式出现脱节现象。

2012-4-13:

更新至0.2版,实现了how参数值为4的切换效果,并优化了代码效率,总代码量:10.2KB。

更新说明:

终于加入了交错切换效果,具体请看示例页第一个例子。现在我无耻的宣布:XScroll.js已经支持17种切换效果。

更新过程中由于之前写那篇减少javascript判断次数的启发,我觉得原本的XScroll.js中的run()函数有“浪费判断”的缺陷。现在已经优化。

XScroll.js介绍:

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

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

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

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

<ul id="idSlider4">
	<li><a href="http://jo2.org/"><img src="s3.jpg"/></a></li>
	<li><a href="http://jo2.org/"><img src="s4.jpg"/></a></li>
	<li><a href="http://jo2.org/"><img src="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(建议不要使用奇怪的事件)

更多的介绍见我在博客园上发的文章,wordpress插入代码不方便

4 评论

  1. 淡入淡出效果不好,
    如果做成是图文混排的就看出来了,测试时不要用纯图片轮换,纯图片是上面的图片逐渐变清晰,把下面的盖住,
    而下面的内容不会减淡至不见

    所以,图文混排的那种结果就是,上面一层逐渐显现,下面一层到时间后突然关闭

发表评论

电子邮件地址不会被公开。