在jQuery中选择下一个图像

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

我如何让它选择下一幅图像，而不是让div显示我的标题

---

如果这没有多大意义，很抱歉。

您必须在.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});
        })
}

当你说：

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

它假定

next

图像是一个直接的邻居（因此

$active.next（'img'）。在您的情况下，长度

将始终为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。将行

$active.removeClass（'active'）

移到回调外部

及

b。添加以下CSS：

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

请注意，

：not（）

伪选择器并非在所有浏览器（即旧IE）中都能工作，但您会明白这一点

---

这里是

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

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

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