正在寻找类似的旋转木马脚本

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

$(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);
});

} );