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'); - 注意空格。
将setInterval调用更改为setInterval(rotateImages,3000);。原因是"rotateImages()"在全局范围内运行。的 Refer

我有3张图像可以旋转但是它们不会回到第一张并重新开始

1 个答案: