Question

我正在尝试创建一个图库，我正在使用for循环来加载所有图像。但现在我遇到的问题是它的速度很快所以我想每次都延迟循环。

我试图设置超时但这不起作用有人知道如何使用Jquery延迟循环。

js code：

 function test(){
 var src = 'img/nature/';
 var img = ['1.jpg'];
 var image = [ "1.jpg", "2.jpg", "3.jpg",'4.jpg','5.jpg','6.jpg','7.jpg' ];
    for ( var i = 0; i < image.length; i = i + 1 ) {
    $('#frame').append('<img class="tile hide" src="'+src + image[ i ]+ '">');
    $('.hide').show(500);
        setTimeout(function(){

        },500);
    }

 }

我还有一个问题。是否可以使用Jquery加载文件夹中的所有imag？

Answer 1

而不是使用for循环，您可以使用递归函数

 var src = 'img/nature/';
 var img = ['1.jpg'];
 var image = [ "1.jpg", "2.jpg", "3.jpg",'4.jpg','5.jpg','6.jpg','7.jpg' ];
 var i = 0;
 var showGallery = function(){
    $('#frame').append('<img class="tile hide" src="'+src + image[ i ]+ '">');
    $('.hide').show(500);
    i++;
    if (i<image.length){
        setTimeout(showGallery,500);
    }
 };

 if (image.length > 0){
    showGallery();
 }

Answer 2

你也可以试试这个：

function test() {
    var src = 'img/nature/';
    var img = ['1.jpg'];
    var image = [ '1.jpg', '2.jpg', '3.jpg','4.jpg','5.jpg','6.jpg','7.jpg' ];

    setInterval(function() {
         $.each(image, function(index, value) {
            $('#frame').append('<img class="tile hide" src="'+src + value + '">');
            $('.hide').show(500);
         });
    }, 500);
}

最后将500改为任何......

但我怀疑这不是你想要做的......下面的方法可能是你想要的：

function test() {
    var src = 'img/nature/',
        img = ['1.jpg'],
        image = [ '1.jpg', '2.jpg', '3.jpg','4.jpg','5.jpg','6.jpg','7.jpg' ],
        maxIndex = (image.length - 1),
        cIndex = 0;

    setInterval(function() {
        if (cIndex == maxIndex)
            cIndex = 0;
        $('#frame').append('<img class="tile hide" src="'+src + image[cIndex] + '">');
        $('.hide').show(500);
        cIndex++;
    }, 500);
}

Answer 3

您的幻灯片放映时间仅为500毫秒。

增加该值

setTimeout（function（）{}，500）; 在幻灯片中有延迟。

＆安培;在循环中调用函数测试...以便幻灯片继续。

样品：

function slideit（）{

if (!document.images)
return 0
document.images.slide.src=eval("image"+step+".src")
if (step<3)
step++
else
step=1

setTimeout("slideit()",3000)

}

Answer 4

另一个解决方案是使用临时范围来增加超时事件的时间值。

function test(){
    var src = 'img/nature/';
    var img = ['1.jpg'];
    var image = [ "1.jpg", "2.jpg", "3.jpg",'4.jpg','5.jpg','6.jpg','7.jpg' ];
    for ( var i = 0; i < image.length; i++ ) {
        (function(i){
            setTimeout(function(){
                $('#frame').append('<img class="tile hide" src="'+src + image[ i ]+ '">');
                $('.hide').show(500);
            }, 500*i);
         })(i);
    }
}

如何在Jquery中延迟for循环

4 个答案: