XScroll.js,是一个用来实现单张图片幻灯片切换效果(焦点图切换)的Javascript类,作者:jo2.org


支持17种切换效果

切换效果参数:

  1. 支持5种基本切换效果,但后4种效果分别有上下左右4个方向
  2. how:切换效果。0淡入淡出,1两张图片同时滚动,2当前图片不动,下一张图片覆盖上来,3当前图片飞走,显示出下一张;4当前图片与下一张图片反向拉伸,然后回切,完成切换.
  3. direct:方向,值为0123,分别表示左上右下,默认为0.在how参数不为0时有效
  4. auto:自动滚动间隔时间。默认为4000,设为false则不自动
  5. step:滚动步长。当滚动方向是水平时,step会默认为slider元素的offsetWidth;当滚动方向是垂直时,则默认为offsetHeight。当然,也可以自己设置
  6. pager:值应该是一个元素的id,指定slider的页码翻页元素。指定后XScroll会为此标签的第一层子元素添加跳转函数
  7. how与direct搭配使用.

更新日志

  1. 2012-4-23:大幅改进了动画函数,大幅提升了动画执行效率
  2. 2012-4-19:bug修复。以前如果快速依次划过页码,则会把路过的图片都动画一次。比如你只是路过2,然后跳到3,此时他还会坚持把2的动画执行完。现在改成,马上中断2的动画,开始3的动画
  3. 2012-4-13:更新至0.2版,实现了how参数值为4的切换效果,并优化了代码效率,总代码量:10.2KB。更新日志


新的图片切换效果:交错切换,方向:向上,自动,带页码翻页,不带上下页,鼠标经过时暂停

代码:
var xscroll = XScroll('idSlider2',{auto:3000,how:4, direct:1,Tween:Tween.CircOut,pager:'slider2p'});