图片等距离滚动切换老板导演演员和舞台的故事

在工作中我们经常会用到内容滚动切换的效果，有人称之为幻灯片也不知道是不是标准的称呼了，总之这类东西很多很多几乎每天都在出现新的形式.

今天就遇到一个这样的问题，要求每个内容切换的时候，都以等距离滚动的形式出现，也就是只滚动一屏宽度就呈现需要的内容。看似很简单也很符合人们的认知习惯，但是其中却暗藏玄机。

我们先来看两个例子：

大家可以看到，常规的滚动切换如果从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毫秒鼠标延迟时间），以防止太多演员快速涌上舞台导致拥塞（触发大量动作消耗系统资源）

经过一段时间的排练，终于开演了，大家看看 : 点这里查看

还有一台演出形式多样（随机缓动切换）：点这里查看

演出的海报：

最后是演出的剧本：

$(document).ready(function(){
    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
})

图片等距离滚动切换 老板 导演 演员 和舞台的故事

图片等距离滚动切换老板导演演员和舞台的故事