图片等距离滚动切换 老板 导演 演员 和舞台的故事
在工作中我们经常会用到内容滚动切换的效果，有人称之为幻灯片 也不知道是不是标准的称呼了 ，总之这类东西很多很多 几乎每天都在出现新的形式.
今天就遇到一个这样的问题，要求每个内容切换的时候，都以等距离滚动的形式出现，也就是只滚动一屏宽度就呈现需要的内容。看似很简单也很符合人们的认知习惯，但是其中却暗藏玄机。
我们先来看两个例子：
常规滚动切换 点击查看 DEMO 等距离滚动切换 点击查看DEMO
大家可以看到，常规的滚动切换 如果从1 一下切换到 10 则要滚动9个单位长度。
而 等距离的滚动切换 无论从何处切换到何处 均只需要滚动一个单位长度。
其实原理就是 只让需要的元素出现并参与滚动，不需要的就一边呆着凉快。
在写这个效果的时候，突然觉得用导演 、演员 、舞台 来形容它们还挺贴切的。于是ID 都按照这些取的。
程序的原理如下：
有一个老板（动画区域） <div class="slider" id="boss"> ...</div>
有一个舞台 只能容纳两个演员（滚动容器 只显示参与滚动的两个元素 ）<ul id="stage" class="stage">...</ul>
有一个导演（控制条）<ul class="items" id="director">...</ul>
有一群演员（滚动内容） <ul id="actor">...</ul>
有一出戏 （滚动出现）function act(){ //演员演出 （动画函数）}
老板搭建了舞台 请了导演和演员，
导演来控制演员上场演出，需要谁演出谁才上场，不需要的就在台后歇着。
演出也很简单 ，就是前面一个演员滚出舞台，紧跟着后面的则滚入舞台区域.
由于台上只有两位演员（就当是二人转演出吧） 所以滚动只需要一个舞台的宽度就完成了切换。
老板不在的时候（鼠标不在动画区域），演员们挨个演出（自动切换）；
老板来的时候（鼠标进入动画区域）停止演出等待导演的命令（鼠标点击控制区域控制）；
由于有的导演想法变的太快（鼠标快速划过控制区域），所以我们给导演一定时间考虑（300毫秒鼠标延迟时间），以防止太多演员快速涌上舞台导致拥塞（触发大量动作消耗系统资源）
经过一段时间的排练，终于开演了，大家看看 : 点这里查看
还有一台演出形式多样（随机缓动切换）：点这里查看
演出的海报 ：
最后是演出的剧本：
var dela=false; //触发延时
var auto=false; //自动切换延时
var movetime=700; //演员上演过场时间 （图片滑动时间）
var wait=3000; //演员切换等待时间 （图片切换间隔）
var width=950; //舞台宽度（滚动元素宽度）
var index=0; // 哪个演员先上场 （起始序列）
var boss=$("#boss"); //我们的老板 它包揽着舞台 导演 和演员（动画区域）
var director=$("#director"); //这是我们的导演组
var dirli=director.find("li");
var dirlen=dirli.length-1; //导演一共控制着多少演员
var stage=$("#stage"); //舞台 （滚动的容器）
var actor=$("#actor"); //演员 （内容列表）
var repactor=""; //准备登台的演员 （将出现在stage的最后一个li中）
//标记当前
function cur(ele){
ele=$(ele)? $(ele):ele;
ele.addClass("cur").siblings().removeClass("cur");
}
dirli.each(function(i){
dirli.eq(i).mouseover(
function(){ //导演让几号演员出场 几号就出场
if(!$(this).hasClass("cur")){
dela=setTimeout(
function(){ //延时触发 防止触发过快
index=i; //导演出牌 （给出序列）
act(); //出场演出 （滚动出现）
},300);
}
}).mouseout(
function(){ //鼠标划出的时候则清除计时
if(dela){
clearTimeout(dela);
}
})
})
var actauto=function(){ //老板不在的时候（鼠标不在boss容器区域内）自动演出
auto = setInterval(
function(){ //循环出演
index++;
act();
if(index>=dirlen){index=-1;}
},wait);
}
var actpause=function(){ //老板来了（鼠标进入boss容器区域内）停止自动演出
if(auto){
clearInterval(auto);
}
}
boss.hover(actpause,actauto);
var act=function act(){ //演员演出 （动画函数）
repactor=actor.find("li").eq(index).html(); //准备需要演出的演员 （提取需要滚入的元素）
cur(director.find("li").eq(index)); //标记谁在表演 （标记当前显示序列）
stage.find("li:last").html(repactor); //演员登台准备 （将需要滚入的元素放入stage的最后一个容器中）
//在舞台上演出 （滚动一屏宽度以显示）
stage.animate(
{"left":-width+"px"},
{queue:false,
duration:movetime,
easing:"easeOutQuart",
complete: function(){ //演出完毕清场子（滚动完毕后的处理 stage复位）
stage.find("li:first").appendTo(stage);
stage.css({"left":0+"px"});
}
});
//end of actor
}
//自动开始
actauto();
//end of doment.ready
})
