在现在很多项目中，都会使用到jQuery Tools中scrollable。特别对于显示Photo Gallery,当然目前国内国外都有第三方非常优秀的的类似jQuery Tools。这是一个基本demo地址：http://jquerytools.org/demos/scrollable/index.html

 

项目中使用了3个Tab，简称 TabA，TabB，TabC，每个Tab下面对应一张图片，图片上有很多hot point，用户点击hot point之后，显示一个overlay。上面的图片是使用Scrollable制作的，上面的图片时一系列的，可以点击previous和next按钮 来显示上一张或下一张图片。

 

Overlay效果:

 

第一种方案：点击对应的Tab时去加载相应的overlay内容，点击hot point时，显示overlay。但是这里有一个问题，Ajax加载overlay内容时需要时间，并且overlay里面包好了4张图片，加载时间相对较长。我们需要使用一下代码：

// initialize scrollable together with the autoscroll plugin
var slideroot= $("#autoscroll").scrollable({circular: true}).autoscroll({ autoplay: false });
 
// provide scrollable API for the action buttons
window.slideapi = slideroot.data("scrollable");

slideapi .seekTo(index, 500); //index是要显示的哪张图片

这时Scrollable API地址：http://jquerytools.org/documentation/scrollable/index.html#api

。然后previous和next按钮自动绑 上了事件，就可以上一张和下一张。但是在第一种方案中，我每次都会调用上面的方法。因为只有等Ajax内容加载完毕，我才可以使用上面的方法。所有每次点 击一个hot point时，都会执行上面的方法，这时问题就来了。在第二次执行代码是，slideroot.data(“scrollable”);显示e没有 data()方法，也就是scrollable不能同时绑定多次，只能绑定一次，然后赋值给slideapi。但是在Ajax调用的方案中，我不能在页面 ready时候就是用上面的代码，因为overlay内容没有加载过来。

第二种方案：换成最原始的方法，在页面加载的时候，把3个tab对应的overlay content都加载过来，隐藏在那里。然后调用上面的方法，在点击第二个hot point时，只需要调用

slideapi.seekTo(index,500);就可以。

 

具体scrollable实现机制没有彻底的分析，但是不值得为什么不对这种方法绑定2次或多次。