IMG幻燈片/畫廊循環後

Question

類

過濾元件我還是一個jQuery新手和我有一個偉大的工程這個簡單的幻燈片/畫廊的代碼，我已經在幾個web項目中使用：

function f_slideShow(){ 
    var v_fadeTime = 600; 
    var v_active = $("#divPFpics IMG.active"); 
    var v_next = v_active.next().length ? v_active.next() : $("#divPFpics IMG:first"); 

    if (v_active.length == 0) 
     { 
      v_active = $("#divPFpics IMG:last"); 
      v_active.addClass("last-active"); 
     } 

    v_next.css({opacity: 0.0}) 
     .addClass("active") 
     .animate({opacity:1.0}, v_fadeTime, function() { 
      v_active.removeClass("active last-active"); 
    }); 
} 

我當前的項目使用了一系列由CSS類分類的圖像。就像現在一樣，這張幻燈片會循環顯示所有的圖片。

我的問題： 如何以及在哪裏放置.filter（）方法，以便此代碼只循環包含所選CSS類的圖像？我已經得到了在畫廊工作的所有其他東西，這是殺了我，所以我最終轉向了Stackoverflow。謝謝大家！

Answer 1

var v_active = $("#divPFpics IMG.active"); 
var v_next = v_active.next().length ? v_active.next() : $("#divPFpics IMG:first"); 

這些線是至關重要的，他們建立了列表你的幻燈片循環切換。

雖然沒有顯示，但我想你的函數每x秒調用一次。

v_active是當前顯示的圖像。

v_next是在DOM之後的圖像。

你可以這樣來做：

var v_active = $("#divPFpics IMG.active"); 
var v_next = v_active.next().length ? v_active.next() : $("#divPFpics IMG:first"); 
while (!v_next.hasClass('yourClassName')) { 
    v_next = v_active.next().length ? v_active.next() : $("#divPFpics IMG:first"); 
} 

不過，我建議你不要使用此解決方案這樣的：如果沒有你的IMG的擁有所需的類，你會無限循環。

如果你真的想使用.filter，你必須重寫那些行。這是由於下一張圖像被選中的方式。您必須找到一種方法來保存當前活動圖像的位置，選擇您的圖像集（$('divPFpics').filter(...)）並選擇下一個。