Выберите следующее изображение в jQuery

Question

У меня есть следующая HTML-разметка.

<div class="caption">
    <img class='active' alt='My Caption' src='path/to/image' />
    <div>My Caption</div>
</div>
<div class="caption">
    <img alt='My Caption 2' src='path/to/image' />
    <div>My Caption 2</div>
</div>

Подписи помещаются внутри этих DIVs из тегов alt с некоторыми JS.

        $('#slider img').each(function() {
            $(this).wrap('<div class="caption"></div>').after('<div>' + $(this).attr('alt') + '</div>');
            $('.caption').width($(this).width()).children('div').each(function() {
                $(this).css({width: $(this).siblings('#slider img').width() -10, opacity: 0.5, display: 'block'});
            });
        });

Проблема, с которой я столкнулся, заключается в том, что когда я пытался сделать мои изображения "скользящими", раньше это работало нормально, но теперь я добавил подписи, у меня возникли некоторые проблемы.

Вот что должно произойти:
Он проходит через каждое изображение, устанавливая класс активным и затемняя изображение, он работал нормально без подписей, но теперь, когда у меня есть подписи, он помещает активный класс в div, в котором есть подпись.

Вот мой JS

function simpleSlider(){
    var $active = $('#slider img.active');

    if($active.length == 0) $active = $('#slideshow img:last');

    var $next = $active.next('img').length ? $active.next()
        : $('#slider img:first');

    $next.css({opacity: 0.0})
        .addClass('active')
        .animate({opacity: 1.0}, 1000, function() {
            $active.removeClass('active');
            $active.css({opacity: 0.0});
        })
}

Как мне сделать так, чтобы он выбрал следующее изображение вместо div с надписью My Caption?

Извините, если это не имеет особого смысла.

Answer 1

Когда вы говорите:

var $next = $active.next('img').length ? $active.next()
        : $('#slider img:first');

это предполагает, что next изображение является прямым соседом (так что $active.next('img').length всегда будет 0 в вашем случае, так как вокруг нет изображений). Но поскольку вы обернули свои изображения в элемент контейнера, вам теперь придется использовать другой подход для обхода.

Я бы сделал это следующим образом:

function simpleSlider() {


    var $active = $('.caption.active');

    if ($active.length == 0) $active = $('.caption:last');

    var $next = $active.next('.caption').length ? $active.next() : $('.caption:first');

    $next.css({
        opacity: 0.0
    }).addClass('active').animate({
        opacity: 1.0
    }, 1000, function() {
        $active.removeClass('active');
        $active.css({
            opacity: 0.0
        });
    })
}

Посмотреть рабочий демо

РЕДАКТИРОВАТЬ:

Если эти изображения наложены друг на друга и скрытое изображение должно всегда перекрывать уже показанное изображение, это можно легко исправить, выполнив:

а. переместить линию $active.removeClass('active') за пределами обратного вызова

а также

б. добавьте следующий CSS:

.caption{
z-index: 100;
}
.caption:not(.active){
z-index: 0;
}

Обратите внимание, что :not() псевдо-селектор не работает во всех браузерах (то есть старых IE), но вы поймете идею.

Вот еще одна скрипка

Answer 2

Вам придется сделать .next() операции на уровне.caption вместо img уровень. Есть несколько способов сделать это. Это один из способов, который соответствует логике, которую вы использовали:

function simpleSlider(){
    var $active = $('#slider img.active');
    if ($active.length == 0) $active = $('#slideshow img:last');
    var $parent = $active.closest(".caption");

    var $nextParent = $parent.next(".caption");
    if (!$nextParent.length) {
        $nextParent = $parent.siblings(".caption").eq(0);
    }
    var $next = $nextParent.find("img");

    $next.css({opacity: 0.0})
        .addClass('active')
        .animate({opacity: 1.0}, 1000, function() {
            $active.removeClass('active');
            $active.css({opacity: 0.0});
        })
}