使用jQuery在一個頁面上播放多個幻燈片

Question

是否可以在使用jQuery（或某些類似包）的同一網頁上創建多個幻燈片（當然，每個幻燈片具有不同的圖像集合）？如果是這樣，怎麼樣？

到目前爲止，所有嘗試都失敗了，因爲所有圖像都顯示在兩個幻燈片中，編號不正確或發生其他干擾效果。

Answer 1

是的，這是可能的。

我有很好的效果使用科達滑塊代碼從這裏： http://www.ndoherty.biz/demos/coda-slider/2.0/

的代碼會是這個樣子，其中一個小組在你的滑塊的項目之一：

<div class="slider-wrap"> 
    <div id="slider1" class="csw"> 
    <div class="panelContainer">     
     <div class="panel" title="Panel 1"> 

您也可以使用合適的CSS，JS和jQuery插件來製作它們，例如http://gsgd.co.uk/sandbox/jquery/easing/，以幫助創建流暢的動畫效果。

Answer 2

是的，我所用的週期插件在：http://malsup.com/jquery/cycle/

我嵌套我的每一個IMG的兩個div和兩個div包裹的東西了......

<div id="before_window_wrapper"> 
    <div name="before_n_after_window"> 

    <div id="before_slide_wrapper"> 
     <div id="before_slide"> 
     <img src"my/image/directory/1.img"/> 
     </div> 
    <div id="slide_comment"> 
     <h3>person comment for this img goes here</h3> 
    </div> 

    </div> 
</div> 

<div id="before_slide_wrapper"> 
    <div id="before_slide"> 
    <img src"my/image/directory/3.img"/> 
    </div> 
    <div id="slide_comment"> 
    <h3>person comment for this img goes here</h3> 
    </div> 
</div> 

和：

<div id="after_window_wrapper"> 
    <div name="before_n_after_window"> 

     <div id="after_slide_wrapper"> 
     <div id="after_slide"> 
      <img src"my/image/directory/2.img"/> 
     </div> 
     <div id="slide_comment"> 
     <h3>person comment for this img goes here</h3> 
     </div> 
    </div> 

    <div id="after_slide_wrapper"> 
     <div id="after_slide"> 
     <img src"my/image/directory/4.img"/> 
     </div> 
     <div id="slide_comment"> 
     <h3>person comment for this img goes here</h3> 
     </div> 
    </div> 

    </div> 
</div> 

「before_n_after_window」的孩子是第正在循環Ê的div：

$("#before_n_after_window").each(function(index){ 
    $(this).cycle(); 
}); 

滑動包裝（before_slide_wrapper和after_slide_wrapper）正在循環（）的完全控制 - 精細。然而，嵌套在它裏面的任何東西都不是，所以你可以放置更多的兄弟姐妹幻燈片（before_slide和after_slide） - 因此「#slide_comment」div。

「before_n_after_window」僅在cycle（）的半控制下，並使用與自己不衝突的css代碼。 「#before_window_wrapper」和「#after_window_wrapper」在您完全控制之下（css-wise）。

既然你有「#before_n_after_window」和它的孩子，只是通過他們的名字和迭代點控制每對：

var i = index; 
var current_slide = $(this); 

// hides the pause button 
$('#pause_button_'+i).hide(); 
//checks index for odd or even 
i = (i%=2) ? ((index+1)/2) : ((index/2)+1); 

$(current_slide).cycle({ 
    fx: 'fade', 
    pager: '#nav_' + i, 
    prev:  '#previous_button_' + i, 
    next:  '#next_button_' + i, 
}); 

// I want to only show the play or pause button at any given time 
$(current_slide).cycle('pause'); 
$('#play_button_'+i).click(function(){ 
    $(current_slide).cycle('resume', true); 
    $('#pause_button_'+i).show(); 
    $('#play_button_'+i).hide(); 
}); 
$('#pause_button_'+i).click(function() { 
    $(current_slide).cycle('pause'); 
    $('#pause_button_'+i).hide(); 
    $('#play_button_'+i).show(); 
}); 

您必須遵守命名約定上述或其他任何你可能會決定上。實際的控件可以放置在除窗口內部以外的任何地方 - 錯誤問題。

在一個側面說明中，我設置這些對在循環後立即暫停，因爲我不想在頁面上運行多個幻燈片。我希望用戶選擇哪一個循環。此外，我必須找到一種方法來關閉可能正在運行的其他任何循環。但是：

if(better_solution){ 
    return please_post; 
}