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

Question

我试图使用除此处讨论的方法之外的其他方法来解决问题

所以我有相关的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>

然后某处有一个包含6个图像的img文件夹:

image1.jpg image2.jpg image3.jpg image4.jpg image5.jpg image6.jpg

并且使用jquery,我试图通过以3secs的时间间隔操纵css和列表索引来基本交换其容器div中的图像.所以我的第一个猜测是:

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

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

不幸的是,它没有像我想要的那样工作.它只是吐出最后一个5的索引,所以显示的图像最终为image6而不是第一个image1然后3secs,image2和2secs再次,image3将显示,依此类推.

那么如何合并setInterval()索引更改创建图像旋转的效果.

注意:

<div id="main-container"></div> 只是一个空容器,当动态调用时,它将作为存储在img文件夹中的图像的占位符.

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

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

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

我的目标是,即使没有点击缩略图,等效的大图像也应该在#main-container创建连续幻灯片的内部旋转.

Answer 1

好了,既然你想要实际做的更清楚,这就是我建议你做的事情.这将无限期地运行,从li标签分配连续的图像#main-container.

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

工作示例:http://jsfiddle.net/jfriend00/RuFBS/

提供HTML之前的早期答案:

目前还不清楚您尝试设置图像的确切内容,但这里有一种方法可以在间隔计时器上迭代各种图像并对每个图像应用一个<li>.如果您想将图像应用于不同的图像,请透露相关的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();
})();

如果你真的只是试图旋转图像#main-container(这与之无关#list li),那么你可以这样做:

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