Cách thay đổi nền trên mỗi 5s

Question

Tôi có hình nền background.jpg làm nền. Mỗi 10 giây, làm thế nào để tải một nền mới background_n.jpg mà vẫn cho 100ms và sau đó trở lại background.jpg và như vậy?

Answer 1

function change_background(new_image_source) { 

    var myimage = $('#myimage'); 

    myimage.attr('src', new_image_source); 

    setTimeout(function() { 

    change_background('new image source here'); 

    }, 10000); 

} 

Answer 2

Sử dụng javascript là setTimeout() chức năng hoặc jQuery

d = new Date(); 
$("#myimg").attr("src", "/myimg.jpg?"+d.getTime()); 

Answer 3

Dưới đây là một ví dụ (mà không cần jQuery để làm việc):

var rotate = false; 
function setbackground(){ 
    window.setTimeout("setbackground()", 5000); 
    newImage = rotate ? 'url(pict1.jpg)' : 'url(pict2.jpg)'; 
    rotate = !rotate; 
    document.getElementById('change').style.backgroundImage = newImage; 
} 

Kính trọng,

Max

Answer 4

• Bạn có thể sử dụng setTimeout(function, timeout) (đồng bằng chức năng Javascript) để thiết lập một function (mà bạn có thể xác định) để chạy sau khi timeout mili giây

  Ví dụ (cảnh báo sẽ được hiển thị sau 10 giây):

  setTimeout(function() { 
      alert('I am running!'); 
  }, 10000); 
  

• bạn có thể change an element's background với:

  $(element).css('background-image', 'url(xy.jpg)') 
  

• Hãy chắc chắn rằng bạn tải trước bạn hình ảnh nền trước Sử dụng chúng.

• Tôi khuyên bạn không nên sử dụng setInterval() cho điều này (trong khoảng thời gian nhỏ như vậy, nó có thể xếp chồng lên nhau), sử dụng chuỗi setTimeout() s để thiết lập hành động lặp lại.

Answer 5

Bạn có thể sử dụng setInterval để chạy một hàm mỗi n giây, và setTimeout cho mã mà thay đổi hình nền trở lại:

window.setInterval(function(){ 
    $('body').css('backgroundImage', 'url(background_n.jpg)'); 
    window.setTimeout(function(){ 
    $('body').css('backgroundImage', 'url(background.jpg)'); 
    }, 100); 
}, 10 * 1000); 

Answer 6

Sử dụng setInterval và setTimeout

window.setInterval(function(){  
    window.setTimeout(function(){ 
     $('div').css('background-image','url(background.jpg)'); 
    },100); 
    $('div').css('background-image','url(background_n.jpg)'); 
},10000); 

ví dụ: http://jsfiddle.net/niklasvh/M56A6/