我仍然是一个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了。谢谢大家!
答案 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(...)
)并选择下一个图像集。