2011-12-22 48 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