尋找類似的旋轉木馬腳本？

Question

我正在尋找一個類似於這個網站的JQuery傳送帶（橫幅）腳本：http://www.purechannelapps.com/

有沒有人知道任何？

非常感謝你， 康納爾

Answer 1

可以SEEE頁面上的滑塊的源代碼。我希望你能弄清楚滑塊是如何設置的。

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


});