0

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

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

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

谢谢，

4

2 回答 2

2

我会做这样的事情：

$(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);
});
于 2012-07-18T19:16:07.767 回答
1

您需要使用 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);
    });
});
于 2012-07-18T19:09:38.683 回答