IMG幻灯片/图库按级别循环AFTER过滤元素

问题描述

| 我仍然是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。谢谢大家！     

解决方法

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(...)

）并选择下一个图像。