IMG幻灯片/画廊循环AFTER按类过滤元素

时间:2011-05-25 12:57:59

标签: jquery class filter image-gallery

我仍然是一个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了。谢谢大家!

1 个答案:

答案 0 :(得分:0)

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(...))并选择下一个图像集。