按类别过滤元素后的 IMG 幻灯片/画廊循环答案

【问题标题】：IMG slideshow/gallery cycling AFTER filtering elements by class按类别过滤元素后的 IMG 幻灯片/画廊循环
【发布时间】：2011-05-25 12:57:58
【问题描述】：

我还是一个 JQuery 新手，我有这个简单的幻灯片/图库代码，效果很好，我在几个网络项目中使用过：

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。谢谢大家！

【问题讨论】：

标签： jquery class filter image-gallery

【解决方案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(...)) 并选择下一个。

【讨论】：