Javascript 如何设置间隔并同时增加值？

我试图用一种不同于所讨论的方法的方法来解决一个问题

所以我有这样的相关html:

<div id="main-container"></div>
<div id="list-container">
    <ul id="list">
        <li class="thumb"><img src="img/thumb-image1.jpg"></li>
        <li class="thumb"><img src="img/thumb-image2.jpg"></li>
        <li class="thumb"><img src="img/thumb-image3.jpg"></li>
        <li class="thumb"><img src="img/thumb-image4.jpg"></li>
        <li class="thumb"><img src="img/thumb-image5.jpg"></li>
        <li class="thumb"><img src="img/thumb-image6.jpg"></li>
    </ul>
</div>

不幸的是，它没有像我希望的那样工作。它只是吐出最后一个索引，即5，因此显示的图像最终显示为image6，而不是第一个image1，然后3秒后，image2和2秒，image3将再次显示，依此类推

那么，我如何合并

setInterval（）

以使索引更改，从而产生图像旋转的效果呢

注意：

<div id="main-container"></div>
<div id="list-container">
    <ul id="list">
        <li class="thumb"><img src="img/thumb-image1.jpg"></li>
        <li class="thumb"><img src="img/thumb-image2.jpg"></li>
        <li class="thumb"><img src="img/thumb-image3.jpg"></li>
        <li class="thumb"><img src="img/thumb-image4.jpg"></li>
        <li class="thumb"><img src="img/thumb-image5.jpg"></li>
        <li class="thumb"><img src="img/thumb-image6.jpg"></li>
    </ul>
</div>

只是一个空容器，当动态调用时，它将作为img文件夹中存储的图像的占位符

实际上，在js文件中，单击缩略图时，下面的代码可以工作

$('#list li').each(function(index){

    $(this).on('click', function(){
        $('#main-container').css({
        'background':'url("img/image'+(index+1)+'.jpg")'
        });
    });
});

---

我的目标是，即使没有点击缩略图，相同的大图像也应该在

#主容器内旋转，从而创建一个连续的幻灯片放映。
好的，现在你要做的事情已经清楚了，我建议你这样做。这将无限期运行，将
li
标记中的连续图像分配给
#主容器

var count = 0;

$('#list li').each(function(index) {
    count += 1;

    $('#main-container').css({
        'background':'url("img/image' + count + '.jpg")';
    });
});

(function() {
    // create local scope to isolate common variables
    // get image count and paths from the actual HTML so nothing is hard-coded
    var images = $('#list li img');
    var index = 0;
    var target = $("#main-container");

    function next() {
        var src = images.eq(index).attr("src");
        target.css("background-image", 'url(' + src + ')');
        index++;
        // if we've run out of images, start over
        if (index >= images.length) {
            index = 0;
        }
    }
    // execute the first one immediately, then subsequent ones with setInterval()
    next();
    setInterval(next, 3000);
})();

工作示例：


提供HTML之前的早期答案：

目前还不清楚您试图设置图像的具体内容，但这里有一种方法可以在间隔计时器上迭代各种图像，并对每个图像应用一个。如果你想将图像应用到不同的东西上，那么请公开相关的HTML，这样我们就可以看到你想要的目标。以下是使用间隔计时器循环浏览所有图像的方法：

(function() {
    // create local scope to isolate common variables
    var targets = $('#list li');
    var index = 0;
    var interval = setInterval(function() {
        targets.eq(index).css("background-image", "url(img/image" + index + ".jpg)");
        index++;
        if (index >= targets.length) {
            clearInterval(interval);
        }
    }, 3000);
})();

就个人而言，如果间隔有特定的迭代次数，我倾向于使用
setTimeout（）
，如下所示：

(function() {
    // create local scope to isolate common variables
    var targets = $('#list li');
    var index = 0;
    function next() {
        targets.eq(index).css("background-image", "url(img/image" + index + ".jpg)");
        index++;
        if (index < targets.length) {
            setTimeout(next, 3000);
        }
    }
    next();
})();

(function() {
    // create local scope to isolate common variables
    var index = 0;
    var numImages = 6;
    var target = $("#main-container");
    function next() {
        target.css("background-image",  "url(img/image" + index + ".jpg)");
        ++index;
        if (index < numImages) {
            setTimeout(next, 3000);
        }
    }
    next();
})();

好了，现在你要做的事情已经很清楚了，下面是我的建议。这将无限期运行，将
li
标记中的连续图像分配给
#主容器

(function() {
    // create local scope to isolate common variables
    // get image count and paths from the actual HTML so nothing is hard-coded
    var images = $('#list li img');
    var index = 0;
    var target = $("#main-container");

    function next() {
        var src = images.eq(index).attr("src");
        target.css("background-image", 'url(' + src + ')');
        index++;
        // if we've run out of images, start over
        if (index >= images.length) {
            index = 0;
        }
    }
    // execute the first one immediately, then subsequent ones with setInterval()
    next();
    setInterval(next, 3000);
})();

工作示例：


提供HTML之前的早期答案：

目前还不清楚您试图设置图像的具体内容，但这里有一种方法可以在间隔计时器上迭代各种图像，并对每个图像应用一个。如果你想将图像应用到不同的东西上，那么请公开相关的HTML，这样我们就可以看到你想要的目标。以下是使用间隔计时器循环浏览所有图像的方法：

(function() {
    // create local scope to isolate common variables
    var targets = $('#list li');
    var index = 0;
    var interval = setInterval(function() {
        targets.eq(index).css("background-image", "url(img/image" + index + ".jpg)");
        index++;
        if (index >= targets.length) {
            clearInterval(interval);
        }
    }, 3000);
})();

就个人而言，如果间隔有特定的迭代次数，我倾向于使用
setTimeout（）
，如下所示：

(function() {
    // create local scope to isolate common variables
    var targets = $('#list li');
    var index = 0;
    function next() {
        targets.eq(index).css("background-image", "url(img/image" + index + ".jpg)");
        index++;
        if (index < targets.length) {
            setTimeout(next, 3000);
        }
    }
    next();
})();

(function() {
    // create local scope to isolate common variables
    var index = 0;
    var numImages = 6;
    var target = $("#main-container");
    function next() {
        target.css("background-image",  "url(img/image" + index + ".jpg)");
        ++index;
        if (index < numImages) {
            setTimeout(next, 3000);
        }
    }
    next();
})();

我想这就是你想要的：

var count = 0;
var imgCOUNT = $('#list li').length;
$('#main-container').css({'background-image' : 'url(img/image1.jpg)','transition' : 'background-image 1s','-webkit-transition' : 'background-image 1s','-moz-transition' : 'background-image 1s'});
var interval = setInterval(function() {
    count++;
    var index = count%imgCOUNT+1;
    $('#main-container').css("background-image", "url(img/image" + index + ".jpg)");
}, 3000);

Firefox中过渡的替代解决方案

var count = 0;
var imgCOUNT = $('#list li').length;
$('#main-container').css({'background-image':'url(img/image1.jpg)'});
var interval = setInterval(function() {
    count++;
    var index = count%imgCOUNT+1;
    $('#main-container').fadeTo(350,.1,function() {
        $(this).css("background-image", "url(img/image" + index + ".jpg)");
    }).delay(350).fadeTo(350,1);
}, 3000);

我想这就是你想要的：

var count = 0;
var imgCOUNT = $('#list li').length;
$('#main-container').css({'background-image' : 'url(img/image1.jpg)','transition' : 'background-image 1s','-webkit-transition' : 'background-image 1s','-moz-transition' : 'background-image 1s'});
var interval = setInterval(function() {
    count++;
    var index = count%imgCOUNT+1;
    $('#main-container').css("background-image", "url(img/image" + index + ".jpg)");
}, 3000);

Firefox中过渡的替代解决方案

var count = 0;
var imgCOUNT = $('#list li').length;
$('#main-container').css({'background-image':'url(img/image1.jpg)'});
var interval = setInterval(function() {
    count++;
    var index = count%imgCOUNT+1;
    $('#main-container').fadeTo(350,.1,function() {
        $(this).css("background-image", "url(img/image" + index + ".jpg)");
    }).delay(350).fadeTo(350,1);
}, 3000);

@阿纳纳姆：我不是想推广发布错误代码，但你应该能够修复语法错误。他只是缺少了一个
“
…@prodigitalson我实际上在评论之前纠正了它并测试了它。实际上这不是语法错误，但代码本身不起作用。谢谢@prodigitalson。在回复框中快速键入内容的风险。@krillgar感谢您的帮助，但在尝试您的代码时，即使语法错误得到纠正，它也不起作用。正如jfriend00在他的回答中所说，那么我们需要额外的指导来了解正在发生的事情：
#main container
在哪里，等等。我家里没有笔记，但是我确实记得一些关于递增器的事情，在类似这样的情况下，它不能正常工作。使用javascript控制台，密切关注正在发生的事情，如果可以，请提供更多详细信息。@anagnam：我不想宣传发布错误代码，但你应该能够修复语法错误。他只是缺少了一个
“
…@prodigitalson我实际上在评论之前纠正了它并测试了它。实际上这不是语法错误，但代码本身不起作用。谢谢@prodigitalson。在回复框中快速键入内容的风险。@krillgar感谢您的帮助，但在尝试您的代码时，即使语法错误得到纠正，它也不起作用。正如jfriend00在他的回答中所说，那么我们需要额外的指导来了解正在发生的事情：
#main container
在哪里，等等。我家里没有笔记，但是我确实记得一些关于递增器的事情，在类似这样的情况下，它不能正常工作。使用javascript控制台，密切关注正在发生的事情，如果可以，请提供更多详细信息。根据OP实际尝试执行的操作（不清楚）添加了几个选项。感谢您的帮助，但在尝试代码时，它会抛出语法错误。据说
索引+++
是一个意外的标识符。我需要
列表li
，这样我就可以跟踪列表中的图像数量，而不是硬编码图像数量。我在问题下面做了一个注释，以便进一步澄清。谢谢我通过显示相关的html代码更新了我的问题。希望这能让我对自己的目标有一个更清晰的认识。Thank根据OP实际要做的事情添加了几个选项（不清楚）。感谢您的帮助，但在尝试代码时，它会抛出语法错误。据说
索引+++
是一个意外的标识符。我需要
列表li
，这样我就可以跟踪列表中的图像数量，而不是硬编码图像数量。我在问题下面做了一个注释，以便进一步澄清。谢谢我通过显示相关的html代码更新了我的问题。希望这能让我对自己的目标有一个更清晰的认识。谢谢你，真管用！知道我们如何在每次迭代中应用淡入或淡出吗？非常感谢，这没有使用我认为OP要求的
标记中的图像计数或路径。@shaun5 opps！类型错误。暂停调试器。有什么问题吗？@shau