Question

我试图使用除了讨论的方法here

之外的其他方法来解决问题

所以我有相关的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();
})();

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

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

3 个答案: