按类别过滤元素后 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(...)) 并选择下一个。