在使用jQuery的計時器上更改DIV CSS

Question

我是javascript新手，想知道如何更改DIV的背景圖像（只有2個圖像），每隔10秒鐘說一次最好的方法。謝謝:)

Answer 1

這應該爲你做它：http://jsfiddle.net/U9GCM/

$(document).ready(function(){ 
var setFirst = $('.set').first();  
setFirst.addClass('active'); 
setTimeout(function(){change_background();},1000); 
}); 

function change_background(){ 
    var setFirst = $('.set').first(), 
     setActive = $('.active'), 
     setNext = setActive.next(), 
     setCheckActive = setActive.attr('id'), 
     setCheckLast = $('.set').last().attr('id'); 

    if(setCheckActive == setCheckLast){ 
     setNext = setFirst; 
     } 

    $('.active').removeClass('active'); 
    setNext.addClass('active'); 
    setTimeout(function(){change_background()},1000); 
    } 

，只要你想你可以添加儘可能多的div，只是改變1000至10000十秒鐘。

希望它有幫助。

Answer 2

var time = 10000; // Ten seconds 
var timer = setInterval(function() { 

    $('#myDiv, #myOtherDiv').css('background-image', '/new/img/path.jpg'); 

}, time); 

未測試，但應該工作。我將以一個例子爲例。

Answer 3

嘗試這樣：

$(document).ready(function(){ 
    setTimeout('setbackground()',10000); 
}); 

function setbackground(){ 
    // change you image here 
    setTimeout('setbackground()',10000); // to change the image in 10 seconds 
} 

Answer 4

$(document).ready(function(){ 
    var i = 0; 
    var images = newArray("image1.jpg","image2.png","image3.jpg"); 
    setTimeout('changeBack(i, images)',10000); 
}); 

function changeBack(i, images) { 
i++; 
if(i > images.length) { 
    i = 0; 
} 
$('#changeBackInThisId').css('background-image', images[i]); 
setTimeout(changeBack(i, images), 10000); 
} 

我希望它工作:-)

或者你可以在風格=你的代碼的任何數量的div「顯示：無」（除了第一個）和每10秒設置顯示：塊;到其中之一。

Answer 5

jsfiddle demo

備用CSS類（即bg1 < - >bg2）與setInterval功能

var body = document.getElementsByTagName('body')[0], 
    switchBG = function() { 
     var bgTimer = setInterval(function() { 
      body.className = (body.className === "bg2" ? "bg1" : "bg2"); 
     }, 10000 /* 10000 ms = 10 sec */); 
    }; 
switchBG(); 

這是直的js

Answer 6

這裏的一個插件類型的答案： http://jsfiddle.net/EpGsc/