我有 3 张旋转的图像，但它们不会返回到第一张并重新开始

Question

我有 3 张图像，我想旋转回来并从第一张图像开始。这是我的 jQuery、HTML 和 CSS。我认为问题出在我的 jQuery 代码上。

#hero {
    width: 960px; 
    height: 300px;
}
#hero div {
    top: 324px; 
    left: 400px;
    position: absolute; 
    z-index: 0;
}
#hero div.previous {
    z-index: 1;
}
#hero div.current {
    z-index: 2;
}

<div class= "container">
    <div id="hero">
        <div class="current"><img src="prayer2.jpg"></div>
        <div><img src="prayer3.jpg" ></div>
        <div><img src="Prayer1.jpg"></div>
    </div>

$(function() {
    setInterval("rotateImages()",3000);
});

function rotateImages() {
    var c1 = $('#hero div.current');
    var n1 = c1.next();

    if (n1.length == 0)
        n1 = $('#hero div: first');

    c1.removeClass('current').addClass('previous');
    n1.css({ opacity: 0.0 }).addClass('current')
        .animate({ opacity: 1.0 }, 1000, function() {
            c1.removeClass('previous');
        });
}

Answer 1

代码有很多问题，

$('#hero div: first'); - 无法识别的表达式。它应该是 $('#hero div:first'); - 注意 space.
将 setInterval 调用更改为 setInterval(rotateImages,3000);。原因是 "rotateImages()" 在全局范围内运行。 Refer

我有 3 张旋转的图像，但它们不会返回到第一张并重新开始

I have 3 images that do rotate but they don't go back to the 1st one and start over

jquery

css

image

image-rotation