2011-12-22 65 views
1

因爲這個background image's fadeInOut transitions produces weird effect in white all the texts的我決定把我自己的自定義圖像旋轉與fadeinout效果程序自定義背景fadeInOut畫廊

var intervalo; 
var i= 0; 
var photos = [ 
    "http://toniweb.us/gm/img/galeria/fondo1.jpg", 
       "http://toniweb.us/gm/img/galeria/fondo2.jpg", 
       "http://toniweb.us/gm/img/galeria/fondo3.jpg", 
       "http://toniweb.us/gm/img/galeria/fondo4.jpg" 
]; 

function rotarFondo(){ 
    var container = $('#headerimgs'); 
    var current = container.children('div:visible:first'); 
    var imgSrc = photos[i]; 
    i++; 
    if(i == photos.length) 
     i = 0; 

    console.log(imgSrc); 
    var next = (current.next().length > 1) ? current.next() : container.children('div:visible'); 
    current.css('background',imgSrc); 
    next.css('background',imgSrc); 

    current.fadeOut(300); 
    next.fadeIn(300); 
} 

function congelarFondo(){ 

} 

$(document).ready(function(){ 
     if (intervalo) 
     clearInterval(intervalo); 
     intervalo = setInterval('rotarFondo()',1000); 
}); 

區間的事情和圖像運算似乎做工精細,但我不知道爲什麼bgImgaes實際上沒有被應用,

測試這裏現在http://jsfiddle.net/bE9Dq/27/

什麼想法?

回答

1

那麼對於初學者它可能會節省您的時間和一些頭痛使用這些插件之一:

(我用他們倆)

我注意到你的代碼的第一件事是你可能需要設置背景圖像如下:

.css('background-image','url(' + imgSrc + ')'); 

在第二行還要注意(在next.)你還在使用imgSrc我想你的意思是使用imgSrc1呢?

+0

ooooooooooooohps !!!!!!非常明顯!非常感謝,但必須有其他的東西,因爲仍然不會工作 – 2011-12-22 18:08:31

+0

我改變了一下代碼,試試。 – sirmdawg 2011-12-22 18:16:55

+0

yey! http://jsfiddle.net/bE9Dq/27/我會挖掘到這些鏈接,讓我們看看謝謝! – 2011-12-22 18:24:44