jqueryforloop"；“忽略”；它'；内容

我正在尝试创建一个jquery“for loop”，用于从数组中获取图像URL，并使用它们更改类为“.mobile”的div的背景

数组中填充了3个URL。问题是第一个和第二个URL被忽略，第三个图像显示3次。此外，我还尝试插入一个警报以查看“I”变量包含的内容，该警报会在每个警报之后出现3次，从0到2进行迭代，而不会在每个警报之前执行代码

代码如下：

$(document).ready(function(){
    var images = [ "url(images/image1.png)","url(images/image2.png)","url(images/image3.png)" ];        
    var i;
    for (i = 0; i < images.length; i = i+1) {
        $('.mobile').delay(2000).animate({'opacity': '0.0'}, 1000);
        $('.mobile').css("background-image", images[ i ]);
        $('.mobile').delay(2000).animate({'opacity': '1.0'}, 1000);
        alert(i);
    };

});

$（文档）.ready（函数（）{
var images=[“url（images/image1.png）”，“url（images/image2.png）”，“url（images/image3.png）”；
var i；
对于（i=0；i

总而言之，我想在下一幅图像出现之前，延迟显示阵列中的每个背景图像

---

我对jQuery还很陌生，因此非常感谢您的帮助！：）

问题在于JQuery选择器，

$（'.mobile'）

将选择与类选择器匹配的所有元素，因此每个循环都会更改所有元素的背景图像

您可以使用根据索引选择正确的元素，如下所示：

for (i = 0; i < images.length; i = i+1) {
    var $item = $('.mobile').eq(i);
    $item.delay(2000).animate({'opacity': '0.0'}, 1000);
    $item.css("background-image", images[ i ]);
    $item.delay(2000).animate({'opacity': '1.0'}, 1000);
};

for（i=0；i

有几件事。如果不透明度为“0.0”，则不会显示图像。如果希望在动画完成后执行某些操作，请传递回调函数。

尝试

$(document).ready(function () {
    var images = ["url(http://placehold.it/32/ffff00)", "url(http://placehold.it/32/ff0000)", "url(http://placehold.it/32/000000)"];

    function render(images) {
        var img = images.shift();
        images.push(img);

        $('.mobile').delay(2000).animate({
            'opacity': '0.0'
        }, 1000, function () {
            console.log(img)
            $(this).css("background-image", img).delay(2000).animate({
                'opacity': '1.0'
            }, 1000, function () {
                render(images);
            });
        });
    }

    render(images)

});

---

演示：

您需要在循环中设置一个闭包。请参阅。@oleq在这种情况下不是必需的。@TrueBlueAussie OP说

用class.mobile“

更改div的背景，所以没有3divs@TrueBlueAussie我认为OP抱怨了以下行为+1：递归更新在这种情况下是合适的（但需要对询问者进行更多解释）.谢谢，这真是个好办法！！当到达最后一张图片时，有没有办法返回到图片1？太棒了！谢谢你的帮助！