在 jQuery 中选择下一张图片答案

【问题标题】：Select next image in jQuery在 jQuery 中选择下一张图片
【发布时间】：2012-04-29 18:23:05
【问题描述】：

我有以下 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>

标题被放置在带有一些 JS 的 alt 标记的 DIV 中。

        $('#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？

对不起，如果这没有多大意义。

【问题讨论】：

标签： jquery image slider next

【解决方案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
        });
    })
}

见a working demo

编辑：

如果这些图像被覆盖并且隐藏的图像应该总是淡出已经显示的图像，您可以通过以下操作轻松解决此问题：

一个。将行 $active.removeClass('active') 移到回调之外

和

b.添加以下 CSS：

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

请注意，:not() 伪选择器不适用于所有浏览器（即旧 IE），但您会明白的。

这里是another fiddle

【讨论】：

谢谢你，这很完美。但是我还有另一个问题。我每 5 秒调用一次此函数，以便进行图像的“幻灯片放映”，但是当它返回到第一张图像时它不会淡入，它只是跳跃。知道为什么吗？
这可能是因为您的动画逻辑与 z 定位相结合：淡入的图像被覆盖的不透明图像隐藏（然后将“弹出”出来）。你熟悉使用z-index吗？

【解决方案2】：

您必须在 .caption 级别而不是在 img 级别执行 .next() 操作。有几种方法可以做到这一点。这是与您使用的逻辑保持一致的一种方式：

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});
        })
}

【讨论】：