Question

我要做的是创建一个快速而肮脏的幻灯片放映。这个想法是我有一个主div包含一个空白的“主”img标签和一组div，每个包含它自己的img和一个span标签。反过来，每个图像的来源被设置为主img的源。所以我开始遍历每个图像并尝试使用setTimeout（）和2秒延迟将其设置为主img的源。我遇到的问题是代码似乎等待了两秒钟，只显示序列中的最后一张图像。

$(document).ready(function () {
    $('div#slideshow').children('div.slideshowsourceimage').each(function () {
        var src = $(this).children('img').attr('src');
        var desc = $(this).children('span').text();

        setTimeout(function () {
            $('img#slideshowimage').attr('src', src);
        }, 2000);
    });
});

如果我能得到第二双眼睛来帮助我找出我做错了什么我会很感激。

谢谢，

Answer 1

我会做这样的事情：

$(function() {
    var $images = $('#slideshow div.slideshowsourceimage');
    var x = 0;
    setInterval(function() {
        if(x == $images.length) { // start over if we get to the last one
            x = 0;
        }

        var $cur = $images.eq(x);
        var src = $cur.find('img').attr('src');
        var desc = $cur.find('span').text();

        $('#slideshowimage').attr('src', src);
        x++;
    }, 2000);
});

Answer 2

您需要使用setInterval或增加每个图像显示之间的秒数。现在发生的事情是所有注册都发生在两秒钟内，所以只有最后一张图像显示。像

这样的东西

$(document).ready(function () {
    var time=0;
    $('div#slideshow').children('div.slideshowsourceimage').each(function () {
        var src = $(this).children('img').attr('src');
        var desc = $(this).children('span').text();

        setTimeout(function () {
            $('img#slideshowimage').attr('src', src);
            time+=2000;
        }, time);
    });
});

JQuery setTimeout不能在循环中工作

2 个答案: