Question

因为这个background image's fadeInOut transitions produces weird effect in white all the texts我决定使用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);
});

间隔事物和图像计算似乎工作正常，但我不知道为什么bgImga实际上没有被应用，

现在在此进行测试http://jsfiddle.net/bE9Dq/27/

任何想法？

Answer 1

对于初学者来说，使用其中一个插件可能会节省一些时间和一些麻烦：

（我已经用过它们了）

我注意到你的代码首先要注意的是你可能需要设置背景图像如下：

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

另请注意您仍在使用的第二行（next.）imgSrc我认为您的意思是使用imgSrc1代替？

自定义背景fadeInOut画廊

1 个答案: