Question

我正在寻找与此网站类似的JQuery轮播（横幅）脚本：templates/display/start.html.ep

有人知道吗？

非常感谢，康纳

Answer 1

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

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


} );

寻找类似的轮播脚本？

1 个答案: