Javascript 如何在jquery中随时间迭代元素

我正在制作这个自动的、无休止的幻灯片，动态加载内容。每个图像都必须有声音伴奏。到目前为止，我得到了图像和声音的动态加载。但这一切都是同时发生的，这是不应该的。我想，

setTimeout

可以在这里派上用场，设置每对之间的间隔，但我得到的只是最后一张图像乘以迭代计数，或者脚本根本不起作用<代码>延迟也没有任何帮助。 到目前为止，我得到的是：

function displayImages(data){   
    var count = data; 
    var pixBox = $('#picture-box'); 
    var imgPre = 'resources/exhibit-'; 
    var imgExt = '.png';
    var sndExt = '.wav';

    for(i = 1; i < count; i++) {        
        var imgSrc = '<img src="' + imgPre + i + imgExt + '">';
        var sndSrc = new Audio(imgPre + i + sndExt);                
        sndSrc.play();
        pixBox.append(imgSrc);
    }   
}

函数显示图像（数据）{
var计数=数据；
var pixBox=$（“#图片框”）；
var imgPre='资源/附件-'；
var imgExt='.png'；
var sndExt='.wav'；
对于（i=1；i

---

我的问题是：如何设置

setTimeout

（或者这里最好的函数），以便它在一段时间内迭代。比方说，要设置每2秒更改一次img/声音对？

您可以使用setInterval，这会在每个间隔执行相同的代码

var myInterval = window.setInterval(displayImages, 2000);

这将确保每2000毫秒调用一次函数

---

有关

的更多信息，您可以尝试以下内容

$(function() {
  var count = 100;
  var i = 0;
  var repeat = setInterval(function() {

    if (i <= count) {
        var imgSrc = '<img src="' + imgPre + i + imgExt + '">';
        var sndSrc = new Audio(imgPre + i + sndExt);                
        sndSrc.play();
        pixBox.append(imgSrc);
        i++;
    }
    else{
        i = 0; //reset count if reaches threshold.
    }

  }, 5000); //5 secs


});

---

您可以像这样使用setTimeout：

function displayImages(cur, total){   

    var pixBox = $('#picture-box'); 
    var imgPre = 'resources/exhibit-'; 
    var imgExt = '.png';
    var sndExt = '.wav';

    var imgSrc = '<img src="' + imgPre + cur + imgExt + '">';
    var sndSrc = new Audio(imgPre + cur + sndExt);                
    sndSrc.play();
    pixBox.append(imgSrc);

    return setTimeout( 'displayImages(' + ((cur+1)%total) + ',' + total + ')', 2000 );

}

---

动画将停止。

请参见此处的设置间隔示例：

var i=0；
设置间隔（fadeDivs，3000）；
函数fadeDivs（）{
i=i

你需要

setInterval

-仍然需要掌握clearTimeout的窍门，但这就是救了我一命的原因！谢谢你，先生，你就是那个家伙！

function displayImages(cur, total){   

    var pixBox = $('#picture-box'); 
    var imgPre = 'resources/exhibit-'; 
    var imgExt = '.png';
    var sndExt = '.wav';

    var imgSrc = '<img src="' + imgPre + cur + imgExt + '">';
    var sndSrc = new Audio(imgPre + cur + sndExt);                
    sndSrc.play();
    pixBox.append(imgSrc);

    return setTimeout( 'displayImages(' + ((cur+1)%total) + ',' + total + ')', 2000 );

}

var animation = displayImages(0,total);
...some code...
clearTimeout(animation);

var i = 0;
setInterval(fadeDivs, 3000);

function fadeDivs() {
    i = i < images.length ? i : 0;
    $('#my-img').fadeOut(200, function(){
        $(this).attr('src', images[i]).fadeIn(200);
    })
    i++;
}