Question

我想用数组中的值替换div的内容。我想将div中的每个值保持3秒。到目前为止，这是我的代码：

        var images = ['a.jpg', 'b.jpg', 'c.jpg'];

        for (i = 0; i < images.length; i++) {
          $('#slideShow').html("<img src='../"+images[i]+"' alt='' />");
        }

这当然会更快地改变图像，以至于人眼始终只看到一个图像在div中。我希望在div上完成下一个.html（）之前保持每个图像3秒钟。怎么做？

Answer 1

试试这个：

images = ["a.jpg", "b.jpg", "c.jpg"];

function change(i){
   if(!images[i]){return false}
   else{
     $("#slideShow").src=images[i];
     setTimeout( function(){ change(i+1) }, 3000);
   }
}
change(0);

没有测试过，但它应该有用。

Answer 2

这个答案假设你想要循环。如果没有，请评论，我会重写。

<script>
var images = ['a.jpg', 'b.jpg', 'c.jpg'];
var curimage = 0;
function changeImage() {
    $('#slideShow').html("<img src='../"+images[curimage]+"' alt='' />");
    curimage++;
    if (curimage > images.length) curimage = 0;
}
changeImage();
window.setInterval(changeImage, 3000);
</script>

我已经测试了这个答案。

如何在jQuery中使用带有计时器的.html（）？

2 个答案: