Làm thế nào để lặp lại hình nền css với Jquery vài giây một lần?

Ví dụ đầu tiên 2 giây là:

body#home h1#siteH1 { background:url(../images/header1.jpg) no-repeat;}

Tiếp 2 giây là:

body#home h1#siteH1 { background:url(../images/header2.jpg) no-repeat;}

Tiếp 2 giây là:

body#home h1#siteH1 { background:url(../images/header3.jpg) no-repeat;}

Và sau đó lặp lại để header1.

Nếu có ai biết cách thực hiện chuyển đổi với hiệu ứng mờ dần, thì nó sẽ đơn giản là hoàn hảo.

Nguồn

2009-09-03 Sergio del Amo

'body # home h1 # siteH1' là bộ chọn không hiệu quả cao. Tại sao không chỉ sử dụng '# siteH1'? –

Đối với thông tin của tôi, đây có phải là trường hợp với bộ chọn jQuery không? – Ropstah

kiểm tra các chức năng đợi:

jQuery Queue

Nguồn

2009-09-03 17:41:25 Slee

Bây giờ với phai

Hãy thử điều này:

var currentBackground = 0; 
var backgrounds = []; 
backgrounds[0] = '../images/header1.jpg'; 
backgrounds[1] = '../images/header2.jpg'; 
backgrounds[2] = '../images/header3.jpg'; 

function changeBackground() { 
    currentBackground++; 
    if(currentBackground > 2) currentBackground = 0; 

    $('body#home h1#siteH1').fadeOut(100,function() { 
     $('body#home h1#siteH1').css({ 
      'background-image' : "url('" + backgrounds[currentBackground] + "')" 
     }); 
     $('body#home h1#siteH1').fadeIn(100); 
    }); 


    setTimeout(changeBackground, 2000); 
} 

$(document).ready(function() { 
    setTimeout(changeBackground, 2000);   
});

Nguồn

2009-09-03 17:45:26 Ropstah

mã của bạn thực thi ngay lập tức. Không chờ đợi bất cứ lúc nào trước khi thay đổi nền và không trở lại nền ban đầu. –

Về cơ bản, tôi muốn lặp lại hình nền giữa các hình –

Xem câu trả lời được cập nhật ... – Ropstah

muộn để đảng, nhưng đây là những gì Tôi chỉ đến với yêu cầu tương tự.

<script type="text/javascript"> 
//populate image set 
var imageAry = ["1.jpg","2.jpg","3.jpg","4.jpg"]; 
//in milliseconds 
var fadeSpeed = "1000"; 
var timeout = 3000; 


function fadeInFront (i){ 
    $('#faderFront').css({ 
     "background-image" : "url("+imageAry[i]+")" 
    }); 
    $('#faderFront').fadeIn(fadeSpeed); 
    i++; 
    if (i==imageAry.length){i=0;} 
    setTimeout(function(){ 
     fadeOutFront(i); 
    },timeout); 
} 
function fadeOutFront (i){ 
    $('#faderBack').css({ 
     "background-image" : "url("+imageAry[i]+")" 
    }); 
    $('#faderFront').fadeOut(fadeSpeed); 
    i++; 
    if (i==imageAry.length){i=0;} 
    setTimeout(function(){ 
     fadeInFront(i); 
    },timeout); 
} 
function preload(arrayOfImages) { 
    $(arrayOfImages).each(function(){ 
     $('<img/>')[0].src = this; 
    }); 
} 

$(document).ready(function(){ 
    preload(imageAry); 
    setTimeout(function(){ 
     fadeOutFront(3); 
    },timeout); 
}); 
</script> 

<style type="text/css"> 

      #faderBack, 
      #faderFront, 
      #inFrontOfBoth 
      { 
       position: absolute; 
       top: 0; 
       left: 0; 
      } 
      #faderFront 
      { 
       background: url("4.jpg") no-repeat center top; 
      } 
</style> 

<body> 

<div id="container"> 

    <div id="faderBack"></div> 
    <div id="faderFront"></div> 
    <div id="inFrontOfBoth">Hello World</div> 
</div>

Nguồn

2013-12-01 22:41:15 Yevgeniy

Làm thế nào để lặp lại hình nền css với Jquery vài giây một lần?

Trả lời

Các vấn đề liên quan