Javascript 寻找类似的旋转木马脚本？

我正在寻找与此网站类似的JQuery carousel（横幅）脚本：

有人知道吗

多谢各位，

---

Conor

您可以在页面上查看滑块的源代码。我希望您能了解滑块是如何设置的

$(document).ready(function() {

//'magic' numbers   
var width_tab = 65;
var width_active = 835;
var duration_grow = 1000;
var slider_duration = 5000;

//scope globals
var currentPanel = 0;
var panels = null;
var control_area = $('#jdi_slider_control');
var controls = null;

//setup the panels
var setupPanels = function(index) {
    panels = $('#jdi_slider').children();

    //setup the panel (no controls)
    for(var i = 0; i < panels.length; i++) {
        switch (i) {
            case index : $(panels[i]).css({'z-index':3,'left':width_active}); break;
            case currentPanel : $(panels[i]).css({'z-index':2}); break;
            default : $(panels[i]).css({'z-index':1})
        }
    }

    //after all the setup, then force map
    $('#jdi_slider_container').css({'background-color':$(panels[index]).css('background-color')});
    $('#jdi_slider_background').css({'width':0,'right':0,'background-color':$(panels[index]).css('background-color')});

    $(panels[index]).css({'left':0});                       
}

var setupControls = function(index) {
    //setup the controls

    //we know the number of panels, so compute
    for (var i = 0; i < panels.length; i++) {
        var img_element = $(panels[i]).find('img').eq(0).clone();
        img_element.attr('href',null);
        $('#jdi_slider_control').append(img_element);
    }

    $('#jdi_slider_control img').wrap( "<div class='jdi_slider_control_panel'></div>");

    control_area = $('#jdi_slider_control');
    controls = control_area.children();
    control_area.css({'width':(controls.length - 1)*width_tab+'px'});

}

var activatePanel = function(index) {

    //animate the changes

    //set the new panel to the desired area
    //do the set up of the new panel
    for(var i = 0; i < panels.length; i++) {
        switch (i) {
            case index : $(panels[i]).css({'z-index':3,'left':width_active}); break;
            case currentPanel : $(panels[i]).css({'z-index':2}); break;
            default : $(panels[i]).css({'z-index':1})
        }   
    }

    //setup the color
    $('#jdi_slider_container').css({'background-color':$(panels[currentPanel]).css('background-color')});

    //do the animations

    //first, setup initial conditions
    $('#jdi_slider_background').css({'width':$('#jdi_slider_control').width(),'right':0,'background-color':$(panels[index]).css('background-color')});

    //animate the slider to 100% width (from initial width)
    $('#jdi_slider_background').animate({'width':'100%' },{duration:duration_grow ,queue:false,
        progress: function() {
            //progress function to sync to moving of the img
            //find if the current width is within the area of our interest
            var slider = $('#jdi_slider');
            var leftEdge = slider.offset().left;
            var rightEdge = leftEdge + slider.width();
            var jdi_background = $('#jdi_slider_background');
            var position = jdi_background.offset().left;
            if ((position >= leftEdge) & (position <= rightEdge)) {
                $(panels[index]).css({'left':position - leftEdge + 'px'});
            }
            //in case the step 'hops' the exact left edge (which it will)
            if (position < leftEdge) {
                $(panels[index]).css({'left':0});                   
            }
        },
        complete: function() {
            //paranoia, after complete, then ensure leftness
            $(panels[index]).css({'left':0});
        }
    });

    //now aanimate the control

    var offsets = new Array(panels.length);
    for (var i = 0; i < panels.length; i++) {
        offsets[i] = (i + index) % panels.length;
    }

    $(controls[offsets[panels.length-1]]).css({'right':'-'+width_tab+'px'});

    var sum_right = 0;

    $(controls[offsets[0]]).animate({'right':control_area.width()},{duration:duration_grow,queue:false,complete:function() {$(this).css({'right':'-'+width_tab+'px'})} } );     

    for(var i = offsets.length - 1; i > 0; i--) {
        $(controls[offsets[i]]).animate({'right':sum_right},{duration:duration_grow,queue:false});
        sum_right += width_tab;
    }

    //finally, update the currentPanel
    currentPanel = index;   
}


//on timer fire, advance the thingy
var advanceSlider = function()  {

    //alter the i to the required setting
    panelToActivate = (currentPanel + 1) % panels.length;
    activatePanel(panelToActivate);
};

if (typeof jdi_slider_timer !== 'undefined') {
    clearInterval(jdi_slider_timer);    
}
jdi_slider_timer = setInterval(advanceSlider,slider_duration);

//add mouse events
$('#jdi_slider_container').hover(function(ev){
    clearInterval(jdi_slider_timer);
    jdi_slider_timer = null;
}, function(ev){
 jdi_slider_timer = setInterval(advanceSlider, slider_duration);
});

setupPanels(0);
setupControls();
activatePanel(0);

//attach a click event to the slider
$('div.jdi_slider_control_panel').click(function() {

    //find the index of the clicked panel
    var index = $('#jdi_slider_control').children().index(this);
    activatePanel(index);
});


} );

$（文档）.ready（函数（）{
//“神奇”数字
var width_tab=65；
可变宽度_有效=835；
var持续时间_增长=1000；
var滑块_持续时间=5000；
//范围全局
var currentPanel=0；
var=null；
var control_area=$（“#jdi_滑块_control”）；
var控制=null；
//设置面板
变量设置面板=功能（索引）{
panels=$（'#jdi_滑块'）。children（）；
//设置面板（无控件）
对于（变量i=0；i=leftEdge）和（位置0；i--）{
$（控制[offset[i]]）。动画（{'right'：sum_right}，{duration:duration_grow，queue:false}）；
右+和=宽度选项卡；
}
//最后，更新currentPanel
currentPanel=索引；
}
//定时开火，推进东西
var advanceSlider=函数（）{
//将i更改为所需的设置
panelToActivate=（currentPanel+1）%panels.length；
激活面板（面板激活）；
};
if（jdi\U滑块\U计时器的类型！==“未定义”）{
clearInterval（jdi\u滑块\u定时器）；
}
jdi\u滑块\u定时器=设置间隔（进阶滑块、滑块\u持续时间）；
//添加鼠标事件
$（'#jdi_滑块_容器'）。悬停（函数（ev）{
clearInterval（jdi\u滑块\u定时器）；
jdi_滑块_计时器=null；
}，功能（ev）{
jdi\u滑块\u定时器=设置间隔（进阶滑块、滑块\u持续时间）；
});
设置面板（0）；
设置控件（）；
激活肽（0）；
//将单击事件附加到滑块
$（'div.jdi_slider_control_panel'）。单击（函数（）{
//查找已单击面板的索引
var index=$（'#jdi_slider_control'）.children（）.index（此）；
激活肽（指数）；
});
} );