XScroll.js，是一个用来实现图片幻灯片切换效果（焦点图切换）的Javascript类，提供下载：nowjava.com


支持17种切换效果

切换效果参数：

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

更新日志

  1. 2012-4-13:更新至0.2版，实现了how参数值为4的切换效果，并优化了代码效率，总代码量：10.2KB。更新日志

由于一屏内同时进行几个图片切换实在是对显卡有不小的考验，所以我加大了各图片区之间的间隔。见谅。

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

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

更多切换效果请下拉




此例只有两张图片互相切换,并带标题。切换效果为：淡入淡出

var x2 = XScroll('idSlider3',{direct:3,how:2,ing:30 });

仿曾经的淘宝电器城的一个切换

var taobao3 = XScroll('idSlider4',{direct:1,how:1,delay:3000,pager:'taobaopage'});
仿淘宝电器城切换0 仿淘宝电器城切换1 仿淘宝电器城切换2

扩展出带上下页按钮的幻灯片切换,不自动

代码： 
var sx = XScroll('idSlider5',{direct:3,how:3,delay:5000,auto:false });
(function(){
	var shang = _.id('shang'),xia = _.id('xia');
	shang.onclick = function(){
		sx.Prev();
	}
	xia.onclick = function(){
		sx.Next();
	}
})()
<< >>

下载代码说明
X关闭

XScroll.js 图片幻灯片切换效果（焦点图切换）的Javascript类

XScroll.js:JavaScript可重用的图片幻灯片切换函数 XScroll.js，是一个用来实现图片幻灯片切换效果（焦点图切换）的Javascript类XScroll是一个实现图片幻灯片切换的js类.目前支持(伪)13 种切换效果。总代码量10KB 这个类起源于我去年在淘宝电器城发现的效果，我发现他的幻灯片一直朝上滚动，就算从最后一张切换至第一张，也是向上。我对这种效果非常好奇，当时研