jquery在同一頁上的多個幻燈片

我正在使用jQuery代碼在我的網站上顯示圖像幻燈片，並帶有計數器。jquery在同一頁上的多個幻燈片

點擊圖片時，img在顯示和隱藏之間切換。

這裏是jQuery代碼我使用：

$(document).ready(function() { 
    var count = $('.image_news').length; 
    $("#total").text(count); 
    // set display:none for all members of ".pic" class except the first 
    $('.image_news:gt(0)').hide(); 

    // stores all matches for class="pic" 
    var $slides = $('.image_news'); 

    $slides.click(function() { 
     // stores the currently-visible slide 
     var $current = $(this); 
     if ($current.is($slides.last())) { 
      $("#current").text("1"); 
      $current.hide(); 
      $slides.first().show(); 
     } 
     // else, hide current slide and show the next one 
     else { 
      $("#current").text($current.next().index()+1); 
      $current.hide().next().show(); 
     } 
    }); 
});

它正常工作與一個幻燈片，但我想有在同一頁上幾個sildeshow，我不知道有多少這樣我不能添加一個唯一的ID到我的圖片（'.image_news'）... 有沒有使用$這樣做的方式？我還需要爲每個幻燈片顯示獨特的計數器，並且幻燈片顯示完全獨立...當單擊第一個幻燈片瀏覽時，只有第一個幻燈片會滑動。

希望有人能幫助我，也許有這樣做的另一種方式......

這裏是一個要的jsfiddle看到它在行動：

http://jsfiddle.net/XRpeA/19/

感謝您的幫助

來源

2014-05-07 mmdwc

您可以在頁面上使用全局變量計數器，然後在每次要添加新滑塊時向其添加1。然後將計數器變量的值附加到id名稱。 –

哼哼謝謝你的回覆@PhillHealey，你能幫我一下嗎？ – mmdwc

您在同一個頁面上使用Id的次數不止一次，而且該頁面不是以有效的HTML開頭。您需要在您的案例中使用類而不是ID。 –

我無法準確編寫代碼，但我可以給出想法來設計它。我認爲你應該考慮面向對象的方式。因爲您想使用多個滑塊實例。如果我是你，我會做這些來獲得你想要的結果。

製作一個滑塊類，它的構造函數以'class name'作爲參數。例如，在您的情況下，您已經使用「image_news」作爲課程名稱。對於每個滑塊，使用不同的類名稱。使用此功能，頁面中不同滑塊之間的分隔將不再存在問題。
完全按照上述定義點擊方法。

我可能已經忘記了......但有了這些設計，就沒有更多的問題在一個頁面中的多個滑塊。

來源

2014-05-07 18:50:17

jquery在同一頁上的多個幻燈片

回答

相關問題