我试图改变不同的背景，通过一个图像数组循环，并每5秒计时。jquery循环通过不同的背景

这里是我的代码：

function changeBG(){ 

    //array of backgrounds 
    var array = ["test.jpg", "test2.jpg", "test3.jpg",]; 


    for (var i=0, len=array.length; i<len; ++i){ 
     $('.round-mask').css('background-image', 'url("images/work/'+array[i]+'")'); 

     } 

} 

window.setInterval(changeBG(), 5000);

这不是工作，我可以看到它是循环的，但我总是得到第三图像。

有什么想法？

在此先感谢。

莫罗

来源

2011-05-12 Mauro74

for循环循环虽然阵列，并取代背景图片随着新的一转，使最后的图像总是出现。 – 2011-05-12 12:22:48

不要使用％3，请使用％array.length，谢谢，这是我的不好:) – Maidot 2011-05-12 12:52:20

小心你如何调用'setInterval'你应该传递一个函数的引用，一个回调函数。目前，如果你传递'changeBG（）'，它只会在你传递它时运行该函数。如果您将其作为回调'changeBG'传递，它将在每个时间间隔运行该函数。 [看到这里的区别]（http://jsfiddle.net/hAxHt/1） – Scoobler 2011-05-12 13:00:48

请试试〜

<script type="text/javascript"> 
    var now = 0; 
    var int = self.setInterval("changeBG()", 1000); 
    var array = ["001.jpg", "002.jpg", "003.jpg", ]; 

    function changeBG(){ 
     //array of backgrounds 
     now = (now+1) % array.length ; 
     $('.round-mask').css('background-image', 'url("' + array[now] + '")'); 
    } 
</script>

，而忘记了这〜

for (var i=0; i<array.length; i++){ 
$('.round-mask').css('background-image', 'url("images/work/'+array[i]+'")'); 

    }

来源

2011-05-12 12:23:24 Maidot

+1 - 他有for循环初始化问题 – 2011-05-12 12:26:13

@Maidot我试过了，但它没有奏效。 – Mauro74 2011-05-12 12:29:39

确定for循环问题但不是总体问题 – mcgrailm 2011-05-12 12:38:08

-1

尝试了这一点

var i =0 ; 

//array of backgrounds 
var array = ["test.jpg", "test2.jpg", "test3.jpg"]; 

function changeBG(){ 
    if (i > array.length -1) { 
     i = 0; 
    } 

    $('.round-mask').css('background-image', 'url("images/work/'+array[i]+'")'); 
    i++; 
} 

window.setInterval(changeBG(), 5000);

来源

2011-05-12 12:30:12 mcgrailm

aww男人，忍者！很好的回答;） – Patricia 2011-05-12 12:34:16

它是一种工作，但它循环4次，而不是3，第四次返回'undefined' – Mauro74 2011-05-12 12:35:11

@ Mauro74确保你拿出数组尾部的逗号; @Patricia谢谢！ – mcgrailm 2011-05-12 12:36:03

这样的事情应该工作：

var i = 0; 

function changeBG(){ 

    //array of backgrounds 
    var array = ["test.jpg", "test2.jpg", "test3.jpg",]; 



    $('.round-mask').css('background-image', 'url("images/work/'+array[i]+'")'); 

    if(i == array.length -1){ 
     i= 0; 
    } 
    else{ 
     i++; 
    } 


}

来源

2011-05-12 12:30:52 Patricia

感谢Patricia！ – Mauro74 2011-05-12 12:41:44

如果您的数组中有三个以上的项目，这将会中断 – mcgrailm 2011-05-12 12:44:09

您应该将if（i == 2）'更改为'if（i == array.length）'，否则如果数组中的图像多于3它只会显示第一个3. – Scoobler 2011-05-12 12:45:14

这真的起作用了。 2014年

var i =0 ; 

//array of backgrounds 
var array = [ 
    "1.jpg", 
    "2.jpg", 
    "3.jpg", 
    "4.jpg", 
    "5.jpg", 
    "6.jpg", 
    "7.jpg", 
    ]; 

function changeBG(){ 
    if (i > array.length -1) { 
     i = 0; 
    } 

    $('.slideContainer').css('background-image', 'url("img/backgrounds/'+array[i]+'")'); 
    i++; 
} 

window.setInterval("changeBG()", 5000);

来源

2014-07-08 05:32:44 tomas

-1

$(element).on("click",function(){ 
    $("<div>").css("background-image", "url("+array[(i-1)]+")"); 
if (i == array.length){ 
i=1; 
} 
else { 
i++; 
} 
})

这是我的编辑，所以实际上它运行或者

$(element).css("background-image", "url("+array[(i-1)]+")"); 
i == bb.length ? i=1 : i++;

来源

2015-12-14 17:08:24 user5678890

jquery循环通过不同的背景

回答

请试试〜

相关问题