Слайд-шоу / галерея IMG циклично ПОСЛЕ фильтрации элементов по классу - PullRequest
Новая
       1

Слайд-шоу / галерея IMG циклично ПОСЛЕ фильтрации элементов по классу

0 голосов
/ 25 мая 2011

Я все еще новичок в 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 голосов
/ 25 мая 2011 
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(...)) и выбрать следующий.

...