以下是 jQuery三屏同时滚动轮播切换js代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>jQuery����ͬʱ�����ֲ��л�</title>
<style type="text/css">
body{margin:0;font-size:12px;font-family:'���ź�','����';;}
ul{padding:0;margin:0;list-style:none;}
a{text-decoration:none;}
/* box */
.box{width:1200px;height:338px;border:1px solid #aaa;border-bottom:4px solid #f9514e;margin:30px auto;background:url(images/wood.jpg) no-repeat center;position:relative;}
.b1,.b2,.b3{position:absolute;overflow:hidden;}
.b1{width:600px;height:338px;top:0;left:0;}
.b2,.b3{width:280px;height:158px;right:0;}
.b2{top:0;}
.b3{top:180px;}
.lst{width:2000em;position:absolute;}
.lst li{float:left;}
.lst1 li{width:600px;height:338px;}
.lst2 li,.lst3 li{width:280px;height:158px;}
.lst3 li{float:none;}
.lst img{width:100%;}
.cen{width:300px;height:318px;padding:10px;background:rgba(0,0,0,.4);position:absolute;top:0;left:600px;}
.cenTit{padding-bottom:5px;border-bottom:1px solid #aaa;font-size:18px;color:#eee;font-weight:normal;}
.wrd{padding-top:5px;border-top:1px solid #;font-size:14px;line-height:20px;color:#e1e1e1;}
.wrd a{font-size:12px;color:#f60;}
.cen1{width:280px;height:22px;background:rgba(0,0,0,.6);color:#fff;line-height:22px;text-align:center;position:absolute;top:158px;right:0;}
.arr{display:inline-block;width:51px;height:45px;background:url(images/arr.png) no-repeat;cursor:pointer;position:absolute;bottom:10px;z-index:9;}
.lef{background-position:0 0;left:700px;}
.rig{background-position:-52px 0;right:380px;}
</style>
</head>
<body>
<div class="box">
<div class="b b1">
<ul class="lst lst1">
<li><img src="images/1.jpg" alt="" /></li>
<li><img src="images/2.jpg" alt="" /></li>
<li><img src="images/3.jpg" alt="" /></li>
<li><img src="images/4.jpg" alt="" /></li>
<li><img src="images/5.jpg" alt="" /></li>
</ul>
</div>
<div class="b b2">
<ul class="lst lst2">
<li><img src="images/2.jpg" alt="" /></li>
<li><img src="images/3.jpg" alt="" /></li>
<li><img src="images/4.jpg" alt="" /></li>
<li><img src="images/5.jpg" alt="" /></li>
<li><img src="images/1.jpg" alt="" /></li>
</ul>
</div>
<div class="b3">
<ul class="lst lst3">
<li><img src="images/3.jpg" alt="" /></li>
<li><img src="images/4.jpg" alt="" /></li>
<li><img src="images/5.jpg" alt="" /></li>
<li><img src="images/1.jpg" alt="" /></li>
<li><img src="images/2.jpg" alt="" /></li>
</ul>
</div>
<div class="cen">
<h3 class="cenTit">����һ��</h3>
<p class="wrd">���Ѿ۲ͣ���һ��û�������Ǿ��ȵ�ˣ���������˺ܿ������ˣ����ǵ��˻�û��ס���ȳ��ˣ�����ȫ�����������ѻ�û��������Ա���ڿ�ѿ�����ȫ���ˡ���ʱ�������ѵ��ˣ��������յ��������ӣ�æ˵�治����˼�����Ƕ��Ŷ��ӵȵ����ڣ���˰ɣ�������룡�����⻰���Ƕ�û���ͣ�ĬĬ������˵���</p>
</div>
<div class="cen1">��Ʒ100ȫ���������ʵ����ǰ�˶�Ч</div>
<span class="arr lef"></span>
<span class="arr rig"></span>
</div>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery.tools.min.js"></script>
<script type="text/javascript">
$(function(){
$(".b").scrollable({
size:1,
items:".b ul",
loop:true,
next:".lef",
prev:".rig",
clickable:false,
circular:true
});
$(".b3").scrollable({
size:1,
items:".b3 ul",
loop:true,
next:".lef",
prev:".rig",
vertical:true,
clickable:false,
circular:true
});
})
</script>
</body>
</html>
JS代码(jquery.tools.min.js):
/* * tools.scrollable 1.1.2 - Scroll your HTML with eye candy. * * Copyright (c) 2009 Tero Piirainen * http://flowplayer.org/tools/scrollable.html * * Dual licensed under MIT and GPL 2+ licenses * http://www.opensource.org/licenses * * Launch:March 2008 * Date:${
date}
* Revision:${
revision}
*/
(function(b){
b.tools=b.tools||{
}
;
b.tools.scrollable={
version:"1.1.2",conf:{
size:5,vertical:false,speed:400,keyboard:true,keyboardSteps:null,disabledClass:"disabled",hoverClass:null,clickable:true,activeClass:"active",easing:"swing",loop:false,items:".items",item:null,prev:".prev",next:".next",prevPage:".prevPage",nextPage:".nextPage",api:false}
}
;
var c;
function a(o,m){
var r=this,p=b(this),d=!m.vertical,e=o.children(),k=0,i;
if(!c){
c=r}
b.each(m,function(s,t){
if(b.isFunction(t)){
p.bind(s,t)}
}
);
if(e.length>1){
e=b(m.items,o)}
function l(t){
var s=b(t);
return m.globalNav?s:o.parent().find(t)}
o.data("finder",l);
var f=l(m.prev),h=l(m.next),g=l(m.prevPage),n=l(m.nextPage);
b.extend(r,{
getIndex:function(){
return k}
,getClickIndex:function(){
var s=r.getItems();
return s.index(s.filter("."+m.activeClass))}
,getConf:function(){
return m}
,getSize:function(){
return r.getItems().size()}
,getPageAmount:function(){
return Math.ceil(this.getSize()/m.size)}
,getPageIndex:function(){
return Math.ceil(k/m.size)}
,getNaviButtons:function(){
return f.add(h).add(g).add(n)}
,getRoot:function(){
return o}
,getItemWrap:function(){
return e}
,getItems:function(){
return e.children(m.item)}
,getVisibleItems:function(){
return r.getItems().slice(k,k+m.size)}
,seekTo:function(s,w,t){
if(s<0){
s=0}
if(k===s){
return r}
if(b.isFunction(w)){
t=w}
if(s>r.getSize()-m.size){
return m.loop?r.begin():this.end()}
var u=r.getItems().eq(s);
if(!u.length){
return r}
var v=b.Event("onBeforeSeek");
p.trigger(v,[s]);
if(v.isDefaultPrevented()){
return r}
if(w===undefined||b.isFunction(w)){
w=m.speed}
function x(){
if(t){
t.call(r,s)}
p.trigger("onSeek",[s])}
if(d){
e.animate({
left:-u.position().left}
,w,m.easing,x)}
else{
e.animate({
top:-u.position().top}
,w,m.easing,x)}
c=r;
k=s;
v=b.Event("onStart");
p.trigger(v,[s]);
if(v.isDefaultPrevented()){
return r}
f.add(g).toggleClass(m.disabledClass,s===0);
h.add(n).toggleClass(m.disabledClass,s>=r.getSize()-m.size);
return r}
,move:function(u,t,s){
i=u>0;
return this.seekTo(k+u,t,s)}
,next:function(t,s){
return this.move(1,t,s)}
,prev:function(t,s){
return this.move(-1,t,s)}
,movePage:function(w,v,u){
i=w>0;
var s=m.size*w;
var t=k%m.size;
if(t>0){
s+=(w>0?-t:m.size-t)}
return this.move(s,v,u)}
,prevPage:function(t,s){
return this.movePage(-1,t,s)}
,nextPage:function(t,s){
return this.movePage(1,t,s)}
,setPage:function(t,u,s){
return this.seekTo(t*m.size,u,s)}
,begin:function(t,s){
i=false;
return this.seekTo(0,t,s)}
,end:function(t,s){
i=true;
var u=this.getSize()-m.size;
return u>0?this.seekTo(u,t,s):r}
,reload:function(){
p.trigger("onReload");
return r}
,focus:function(){
c=r;
return r}
,click:function(u){
var v=r.getItems().eq(u),s=m.activeClass,t=m.size;
if(u<0||u>=r.getSize()){
return r}
if(t==1){
if(m.loop){
return r.next()}
if(u===0||u==r.getSize()-1){
i=(i===undefined)?true:!i}
return i===false?r.prev():r.next()}
if(t==2){
if(u==k){
u--}
r.getItems().removeClass(s);
v.addClass(s);
return r.seekTo(u,time,fn)}
if(!v.hasClass(s)){
r.getItems().removeClass(s);
v.addClass(s);
var x=Math.floor(t/2);
var w=u-x;
if(w>r.getSize()-t){
w=r.getSize()-t}
if(w!==u){
return r.seekTo(w)}
}
return r}
,bind:function(s,t){
p.bind(s,t);
return r}
,unbind:function(s){
p.unbind(s);
return r}
}
);
b.each("onBeforeSeek,onStart,onSeek,onReload".split(","),function(s,t){
r[t]=function(u){
return r.bind(t,u)}
}
);
f.addClass(m.disabledClass).click(function(){
r.prev()}
);
h.click(function(){
r.next()}
);
n.click(function(){
r.nextPage()}
);
if(r.getSize()<m.size){
h.add(n).addClass(m.disabledClass)}
g.addClass(m.disabledClass).click(function(){
r.prevPage()}
);
var j=m.hoverClass,q="keydown."+Math.random().toString().substring(10);
r.onReload(function(){
if(j){
r.getItems().hover(function(){
b(this).addClass(j)}
,function(){
b(this).removeClass(j)}
)}
if(m.clickable){
r.getItems().each(function(s){
b(this).unbind("click.scrollable").bind("click.scrollable",function(t){
if(b(t.target).is("a")){
return}
return r.click(s)}
)}
)}
if(m.keyboard){
b(document).unbind(q).bind(q,function(t){
if(t.altKey||t.ctrlKey){
return}
if(m.keyboard!="static"&&c!=r){
return}
var u=m.keyboardSteps;
if(d&&(t.keyCode==37||t.keyCode==39)){
r.move(t.keyCode==37?-u:u);
return t.preventDefault()}
if(!d&&(t.keyCode==38||t.keyCode==40)){
r.move(t.keyCode==38?-u:u);
return t.preventDefault()}
return true}
)}
else{
b(document).unbind(q)}
}
);
r.reload()}
b.fn.scrollable=function(d){
var e=this.eq(typeof d=="number"?d:0).data("scrollable");
if(e){
return e}
var f=b.extend({
}
,b.tools.scrollable.conf);
d=b.extend(f,d);
d.keyboardSteps=d.keyboardSteps||d.size;
this.each(function(){
e=new a(b(this),d);
b(this).data("scrollable",e)}
);
return d.api?e:this}
}
)(jQuery);
(function(b){
var a=b.tools.scrollable;
a.plugins=a.plugins||{
}
;
a.plugins.navigator={
version:"1.0.2",conf:{
navi:".navi",naviItem:null,activeClass:"active",indexed:false,api:false,idPrefix:null}
}
;
b.fn.navigator=function(d){
var e=b.extend({
}
,a.plugins.navigator.conf),c;
if(typeof d=="string"){
d={
navi:d}
}
d=b.extend(e,d);
this.each(function(){
var i=b(this).scrollable(),f=i.getRoot(),l=f.data("finder").call(null,d.navi),g=null,k=i.getNaviButtons();
if(i){
c=i}
i.getNaviButtons=function(){
return k.add(l)}
;
function j(){
if(!l.children().length||l.data("navi")==i){
l.empty();
l.data("navi",i);
for(var m=0;
m<i.getPageAmount();
m++){
l.append(b("<"+(d.naviItem||"a")+"/>"))}
g=l.children().each(function(n){
var o=b(this);
o.hover(function(p){
i.setPage(n);
return p.preventDefault()}
);
if(d.indexed){
o.text(n)}
if(d.idPrefix){
o.attr("id",d.idPrefix+n)}
}
)}
else{
g=d.naviItem?l.find(d.naviItem):l.children();
g.each(function(n){
var o=b(this);
o.hover(function(p){
i.setPage(n);
return p.preventDefault()}
)}
)}
g.eq(0).addClass(d.activeClass)}
i.onStart(function(o,n){
var m=d.activeClass;
g.removeClass(m).eq(i.getPageIndex()).addClass(m)}
);
i.onReload(function(){
j()}
);
j();
var h=g.filter("[href="+location.hash+"]");
if(h.length){
i.move(g.index(h))}
}
);
return d.api?c:this}
}
)(jQuery);
(function(b){
var a=b.tools.scrollable;
a.plugins=a.plugins||{
}
;
a.plugins.autoscroll={
version:"1.0.1",conf:{
autoplay:true,interval:3000,autopause:true,steps:1,api:false}
}
;
b.fn.autoscroll=function(d){
if(typeof d=="number"){
d={
interval:d}
}
var e=b.extend({
}
,a.plugins.autoscroll.conf),c;
b.extend(e,d);
this.each(function(){
var g=b(this).scrollable();
if(g){
c=g}
var i,f,h=true;
g.play=function(){
if(i){
return}
h=false;
i=setInterval(function(){
g.move(e.steps)}
,e.interval);
g.move(e.steps)}
;
g.pause=function(){
i=clearInterval(i)}
;
g.stop=function(){
g.pause();
h=true}
;
if(e.autopause){
g.getRoot().add(g.getNaviButtons()).hover(function(){
g.pause();
clearInterval(f)}
,function(){
if(!h){
f=setTimeout(g.play,e.interval)}
}
)}
if(e.autoplay){
setTimeout(g.play,e.interval)}
}
);
return e.api?c:this}
}
)(jQuery);
(function(c){
function p(d,a,b){
var e=this,l=d.add(this),h=d.find(b.tabs),j=a.jquery?a:d.children(a),i;
h.length||(h=d.children());
j.length||(j=d.parent().find(a));
j.length||(j=c(a));
c.extend(this,{
click:function(f,g){
var k=h.eq(f);
if(typeof f=="string"&&f.replace("#","")){
k=h.filter("[href*="+f.replace("#","")+"]");
f=Math.max(h.index(k),0)}
if(b.rotate){
var n=h.length-1;
if(f<0)return e.click(n,g);
if(f>n)return e.click(0,g)}
if(!k.length){
if(i>=0)return e;
f=b.initialIndex;
k=h.eq(f)}
if(f===i)return e;
g=g||c.Event();
g.type="onBeforeClick";
l.trigger(g,[f]);
if(!g.isDefaultPrevented()){
o[b.effect].call(e,f,function(){
g.type="onClick";
l.trigger(g,[f])}
);
i=f;
h.removeClass(b.current);
k.addClass(b.current);
return e}
}
,getConf:function(){
return b}
,getTabs:function(){
return h}
,getPanes:function(){
return j}
,getCurrentPane:function(){
return j.eq(i)}
,getCurrentTab:function(){
return h.eq(i)}
,getIndex:function(){
return i}
,next:function(){
return e.click(i+1)}
,prev:function(){
return e.click(i-1)}
}
);
c.each("onBeforeClick,onClick".split(","),function(f,g){
c.isFunction(b[g])&&c(e).bind(g,b[g]);
e[g]=function(k){
c(e).bind(g,k);
return e}
}
);
if(b.history&&c.fn.history){
c.tools.history.init(h);
b.event="history"}
h.each(function(f){
c(this).bind(b.event,function(g){
e.click(f,g);
return g.preventDefault()}
)}
);
j.find("a[href^=#]").click(function(f){
e.click(c(this).attr("href"),f)}
);
if(location.hash)e.click(location.hash);
else if(b.initialIndex===0||b.initialIndex>0)e.click(b.initialIndex)}
c.tools=c.tools||{
version:"1.2.2"}
;
c.tools.tabs={
conf:{
tabs:"a",current:"current",onBeforeClick:null,onClick:null,effect:"default",initialIndex:0,event:"click",rotate:false,history:false}
,addEffect:function(d,a){
o[d]=a}
}
;
var o={
"default":function(d,a){
this.getPanes().hide().eq(d).show();
a.call()}
,fade:function(d,a){
var b=this.getConf(),e=b.fadeOutSpeed,l=this.getPanes();
e?l.fadeOut(e):l.hide();
l.eq(d).fadeIn(b.fadeInSpeed,a)}
,slide:function(d,a){
this.getPanes().slideUp(200);
this.getPanes().eq(d).slideDown(400,a)}
,ajax:function(d,a){
this.getPanes().eq(0).load(this.getTabs().eq(d).attr("href"),a)}
}
,m;
c.tools.tabs.addEffect("horizontal",function(d,a){
m||(m=this.getPanes().eq(0).width());
this.getCurrentPane().animate({
width:0}
,function(){
c(this).hide()}
);
this.getPanes().eq(d).animate({
width:m}
,function(){
c(this).show();
a.call()}
)}
);
c.fn.tabs=function(d,a){
var b=this.data("tabs");
if(b)return b;
if(c.isFunction(a))a={
onBeforeClick:a}
;
a=c.extend({
}
,c.tools.tabs.conf,a);
this.each(function(){
b=new p(c(this),d,a);
c(this).data("tabs",b)}
);
return a.api?b:this}
}
)(jQuery);
(function(a){
a.tools=a.tools||{
version:"v1.2.7"}
,a.tools.overlay={
addEffect:function(a,b,d){
c[a]=[b,d]}
,conf:{
close:null,closeOnClick:!0,closeOnEsc:!0,closeSpeed:"fast",effect:"default",fixed:!a.browser.msie||a.browser.version>6,left:"center",load:1,mask:null,oneInstance:!0,speed:"normal",target:null,top:"10%"}
}
;
var b=[],c={
}
;
a.tools.overlay.addEffect("default",function(b,c){
var d=this.getConf(),e=a(window);
d.fixed||(b.top+=e.scrollTop(),b.left+=e.scrollLeft()),b.position=d.fixed?"fixed":"absolute",this.getOverlay().css(b).fadeIn(d.speed,c)}
,function(a){
this.getOverlay().fadeOut(this.getConf().closeSpeed,a)}
);
function d(d,e){
var f=this,g=d.add(f),h=a(window),i,j,k,l=a.tools.expose&&(e.mask||e.expose),m=Math.random().toString().slice(10);
l&&(typeof l=="string"&&(l={
color:l}
),l.closeOnClick=l.closeOnEsc=!1);
var n=e.target||d.attr("rel");
j=n?a(n):null||d;
if(!j.length)throw"Could not find Overlay:"+n;
d&&d.index(j)==-1&&d.click(function(a){
f.load(a);
return a.preventDefault()}
),a.extend(f,{
load:function(d){
if(f.isOpened())return f;
var i=c[e.effect];
if(!i)throw"Overlay:cannot find effect:\""+e.effect+"\"";
e.oneInstance&&a.each(b,function(){
this.close(d)}
),d=d||a.Event(),d.type="onBeforeLoad",g.trigger(d);
if(d.isDefaultPrevented())return f;
k=!0,l&&a(j).expose(l);
var n=e.top,o=e.left,p=j.outerWidth({
margin:!0}
),q=j.outerHeight({
margin:!0}
);
typeof n=="string"&&(n=n=="center"?Math.max((h.height()-q)/2,0):parseInt(n,10)/100*h.height()),o=="center"&&(o=Math.max((h.width()-p)/2,0)),i[0].call(f,{
top:n,left:o}
,function(){
k&&(d.type="onLoad",g.trigger(d))}
),l&&e.closeOnClick&&a.mask.getMask().one("click",f.close),e.closeOnClick&&a(document).on("click."+m,function(b){
a(b.target).parents(j).length||f.close(b)}
),e.closeOnEsc&&a(document).on("keydown."+m,function(a){
a.keyCode==27&&f.close(a)}
);
return f}
,close:function(b){
if(!f.isOpened())return f;
b=b||a.Event(),b.type="onBeforeClose",g.trigger(b);
if(!b.isDefaultPrevented()){
k=!1,c[e.effect][1].call(f,function(){
b.type="onClose",g.trigger(b)}
),a(document).off("click."+m+" keydown."+m),l&&a.mask.close();
return f}
}
,getOverlay:function(){
return j}
,getTrigger:function(){
return d}
,getClosers:function(){
return i}
,isOpened:function(){
return k}
,getConf:function(){
return e}
}
),a.each("onBeforeLoad,onStart,onLoad,onBeforeClose,onClose".split(","),function(b,c){
a.isFunction(e[c])&&a(f).on(c,e[c]),f[c]=function(b){
b&&a(f).on(c,b);
return f}
}
),i=j.find(e.close||".close"),!i.length&&!e.close&&(i=a("<a class=\"close\"></a>"),j.prepend(i)),i.click(function(a){
f.close(a)}
),e.load&&f.load()}
a.fn.overlay=function(c){
var e=this.data("overlay");
if(e)return e;
a.isFunction(c)&&(c={
onBeforeLoad:c}
),c=a.extend(!0,{
}
,a.tools.overlay.conf,c),this.each(function(){
e=new d(a(this),c),b.push(e),a(this).data("overlay",e)}
);
return c.api?e:this}
}
)(jQuery);
(function(a){
a.tools=a.tools||{
version:"v1.2.7"}
;
var b;
b=a.tools.expose={
conf:{
maskId:"exposeMask",loadSpeed:"slow",closeSpeed:"fast",closeOnClick:!0,closeOnEsc:!0,zIndex:9998,opacity:.8,startOpacity:0,color:"#fff",onLoad:null,onClose:null}
}
;
function c(){
if(a.browser.msie){
var b=a(document).height(),c=a(window).height();
return[window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth,b-c<20?c:b]}
return[a(document).width(),a(document).height()]}
function d(b){
if(b)return b.call(a.mask)}
var e,f,g,h,i;
a.mask={
load:function(j,k){
if(g)return this;
typeof j=="string"&&(j={
color:j}
),j=j||h,h=j=a.extend(a.extend({
}
,b.conf),j),e=a("#"+j.maskId),e.length||(e=a("<div/>").attr("id",j.maskId),a("body").append(e));
var l=c();
e.css({
position:"absolute",top:0,left:0,width:l[0],height:l[1],display:"none",opacity:j.startOpacity,zIndex:j.zIndex}
),j.color&&e.css("backgroundColor",j.color);
if(d(j.onBeforeLoad)===!1)return this;
j.closeOnEsc&&a(document).on("keydown.mask",function(b){
b.keyCode==27&&a.mask.close(b)}
),j.closeOnClick&&e.on("click.mask",function(b){
a.mask.close(b)}
),a(window).on("resize.mask",function(){
a.mask.fit()}
),k&&k.length&&(i=k.eq(0).css("zIndex"),a.each(k,function(){
var b=a(this);
/relative|absolute|fixed/i.test(b.css("position"))||b.css("position","relative")}
),f=k.css({
zIndex:Math.max(j.zIndex+1,i=="auto"?0:i)}
)),e.css({
display:"block"}
).fadeTo(j.loadSpeed,j.opacity,function(){
a.mask.fit(),d(j.onLoad),g="full"}
),g=!0;
return this}
,close:function(){
if(g){
if(d(h.onBeforeClose)===!1)return this;
e.fadeOut(h.closeSpeed,function(){
d(h.onClose),f&&f.css({
zIndex:i}
),g=!1}
),a(document).off("keydown.mask"),e.off("click.mask"),a(window).off("resize.mask")}
return this}
,fit:function(){
if(g){
var a=c();
e.css({
width:a[0],height:a[1]}
)}
}
,getMask:function(){
return e}
,isLoaded:function(a){
return a?g=="full":g}
,getConf:function(){
return h}
,getExposed:function(){
return f}
}
,a.fn.mask=function(b){
a.mask.load(b);
return this}
,a.fn.expose=function(b){
a.mask.load(b,this);
return this}
}
)(jQuery);
(function(a){
a.tools=a.tools||{
version:"v1.2.7"}
,a.tools.scrollable={
conf:{
activeClass:"active",circular:!1,clonedClass:"cloned",disabledClass:"disabled",easing:"swing",initialIndex:0,item:"> *",items:".items",keyboard:!0,mousewheel:!1,next:".next",prev:".prev",size:1,speed:400,vertical:!1,touch:!0,wheelSpeed:0}
}
;
function b(a,b){
var c=parseInt(a.css(b),10);
if(c)return c;
var d=a[0].currentStyle;
return d&&d.width&&parseInt(d.width,10)}
function c(b,c){
var d=a(c);
return d.length<2?d:b.parent().find(c)}
var d;
function e(b,e){
var f=this,g=b.add(f),h=b.children(),i=0,j=e.vertical;
d||(d=f),h.length>1&&(h=a(e.items,b)),e.size>1&&(e.circular=!1),a.extend(f,{
getConf:function(){
return e}
,getIndex:function(){
return i}
,getSize:function(){
return f.getItems().size()}
,getNaviButtons:function(){
return n.add(o)}
,getRoot:function(){
return b}
,getItemWrap:function(){
return h}
,getItems:function(){
return h.find(e.item).not("."+e.clonedClass)}
,move:function(a,b){
return f.seekTo(i+a,b)}
,next:function(a){
return f.move(e.size,a)}
,prev:function(a){
return f.move(-e.size,a)}
,begin:function(a){
return f.seekTo(0,a)}
,end:function(a){
return f.seekTo(f.getSize()-1,a)}
,focus:function(){
d=f;
return f}
,addItem:function(b){
b=a(b),e.circular?(h.children().last().before(b),h.children().first().replaceWith(b.clone().addClass(e.clonedClass))):(h.append(b),o.removeClass("disabled")),g.trigger("onAddItem",[b]);
return f}
,seekTo:function(b,c,k){
b.jquery||(b*=1);
if(e.circular&&b===0&&i==-1&&c!==0)return f;
if(!e.circular&&b<0||b>f.getSize()||b<-1)return f;
var l=b;
b.jquery?b=f.getItems().index(b):l=f.getItems().eq(b);
var m=a.Event("onBeforeSeek");
if(!k){
g.trigger(m,[b,c]);
if(m.isDefaultPrevented()||!l.length)return f}
var n=j?{
top:-l.position().top}
:{
left:-l.position().left}
;
i=b,d=f,c===undefined&&(c=e.speed),h.animate(n,c,e.easing,k||function(){
g.trigger("onSeek",[b])}
);
return f}
}
),a.each(["onBeforeSeek","onSeek","onAddItem"],function(b,c){
a.isFunction(e[c])&&a(f).on(c,e[c]),f[c]=function(b){
b&&a(f).on(c,b);
return f}
}
);
if(e.circular){
var k=f.getItems().slice(-1).clone().prependTo(h),l=f.getItems().eq(1).clone().appendTo(h);
k.add(l).addClass(e.clonedClass),f.onBeforeSeek(function(a,b,c){
if(!a.isDefaultPrevented()){
if(b==-1){
f.seekTo(k,c,function(){
f.end(0)}
);
return a.preventDefault()}
b==f.getSize()&&f.seekTo(l,c,function(){
f.begin(0)}
)}
}
);
var m=b.parents().add(b).filter(function(){
if(a(this).css("display")==="none")return!0}
);
m.length?(m.show(),f.seekTo(0,0,function(){
}
),m.hide()):f.seekTo(0,0,function(){
}
)}
var n=c(b,e.prev).click(function(a){
a.stopPropagation(),f.prev()}
),o=c(b,e.next).click(function(a){
a.stopPropagation(),f.next()}
);
e.circular||(f.onBeforeSeek(function(a,b){
setTimeout(function(){
a.isDefaultPrevented()||(n.toggleClass(e.disabledClass,b<=0),o.toggleClass(e.disabledClass,b>=f.getSize()-1))}
,1)}
),e.initialIndex||n.addClass(e.disabledClass)),f.getSize()<2&&n.add(o).addClass(e.disabledClass),e.mousewheel&&a.fn.mousewheel&&b.mousewheel(function(a,b){
if(e.mousewheel){
f.move(b<0?1:-1,e.wheelSpeed||50);
return!1}
}
);
if(e.touch){
var p={
}
;
h[0].ontouchstart=function(a){
var b=a.touches[0];
p.x=b.clientX,p.y=b.clientY}
,h[0].ontouchmove=function(a){
if(a.touches.length==1&&!h.is(":animated")){
var b=a.touches[0],c=p.x-b.clientX,d=p.y-b.clientY;
f[j&&d>0||!j&&c>0?"next":"prev"](),a.preventDefault()}
}
}
e.keyboard&&a(document).on("keydown.scrollable",function(b){
if(!(!e.keyboard||b.altKey||b.ctrlKey||b.metaKey||a(b.target).is(":input"))){
if(e.keyboard!="static"&&d!=f)return;
var c=b.keyCode;
if(j&&(c==38||c==40)){
f.move(c==38?-1:1);
return b.preventDefault()}
if(!j&&(c==37||c==39)){
f.move(c==37?-1:1);
return b.preventDefault()}
}
}
),e.initialIndex&&f.seekTo(e.initialIndex,0,function(){
}
)}
a.fn.scrollable=function(b){
var c=this.data("scrollable");
if(c)return c;
b=a.extend({
}
,a.tools.scrollable.conf,b),this.each(function(){
c=new e(a(this),b),a(this).data("scrollable",c)}
);
return b.api?c:this}
}
)(jQuery);
(function(a){
var b=a.tools.scrollable;
b.autoscroll={
conf:{
autoplay:!0,interval:3e3,autopause:!0}
}
,a.fn.autoscroll=function(c){
typeof c=="number"&&(c={
interval:c}
);
var d=a.extend({
}
,b.autoscroll.conf,c),e;
this.each(function(){
var b=a(this).data("scrollable"),c=b.getRoot(),f,g=!1;
function h(){
f&&clearTimeout(f),f=setTimeout(function(){
b.next()}
,d.interval)}
b&&(e=b),b.play=function(){
f||(g=!1,c.on("onSeek",h),h())}
,b.pause=function(){
f=clearTimeout(f),c.off("onSeek",h)}
,b.resume=function(){
g||b.play()}
,b.stop=function(){
g=!0,b.pause()}
,d.autopause&&c.add(b.getNaviButtons()).hover(b.pause,b.resume),d.autoplay&&b.play()}
);
return d.api?e:this}
}
)(jQuery);
(function(a){
var b=a.tools.scrollable;
b.navigator={
conf:{
navi:".navi",naviItem:null,activeClass:"active",indexed:!1,idPrefix:null,history:!1}
}
;
function c(b,c){
var d=a(c);
return d.length<2?d:b.parent().find(c)}
a.fn.navigator=function(d){
typeof d=="string"&&(d={
navi:d}
),d=a.extend({
}
,b.navigator.conf,d);
var e;
this.each(function(){
var b=a(this).data("scrollable"),f=d.navi.jquery?d.navi:c(b.getRoot(),d.navi),g=b.getNaviButtons(),h=d.activeClass,i=d.history&&history.pushState,j=b.getConf().size;
b&&(e=b),b.getNaviButtons=function(){
return g.add(f)}
,i&&(history.pushState({
i:0}
,""),a(window).on("popstate",function(a){
var c=a.originalEvent.state;
c&&b.seekTo(c.i)}
));
function k(a,c,d){
b.seekTo(c),d.preventDefault(),i&&history.pushState({
i:c}
,"")}
function l(){
return f.find(d.naviItem||"> *")}
function m(b){
var c=a("<"+(d.naviItem||"a")+"/>").hover(function(c){
k(a(this),b,c)}
);
b===0&&c.addClass(h),d.indexed&&c.text(b+1),d.idPrefix&&c.attr("id",d.idPrefix+b);
return c.appendTo(f)}
l().length?l().each(function(b){
a(this).hover(function(c){
k(a(this),b,c)}
)}
):a.each(b.getItems(),function(a){
a%j==0&&m(a)}
),b.onBeforeSeek(function(a,b){
setTimeout(function(){
if(!a.isDefaultPrevented()){
var c=b/j,d=l().eq(c);
d.length&&l().removeClass(h).eq(c).addClass(h)}
}
,1)}
),b.onAddItem(function(a,c){
var d=b.getItems().index(c);
d%j==0&&m(d)}
)}
);
return d.api?e:this}
}
)(jQuery);
分享到QQ
分享到微博
微信扫一扫
