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

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>

然后某处有一个 img 文件夹，其中包含 6 个名为：

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

并且使用 jquery，我试图通过以 3 秒的时间间隔操作 css 和列表索引来基本上交换其容器 div 内的图像。所以我的第一个猜测是：

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

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

不幸的是，它没有按我的意愿工作。它只是吐出最后一个索引，即 5，所以显示的图像最终显示为 image6 而不是第一个 image1，然后 3 秒后，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();
})();

Answer 2

var count = 0;

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

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

Answer 3

我认为这就是你想要的：

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