自定义背景fadeInOut画廊 [英] custom background fadeInOut gallery

问题描述

由于此背景图像的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/

有什么想法吗?

解决方案

使用入门插件可能会为您节省一些时间和一些麻烦:

• http://buildinternet.com/project/supersized/
• http://bavotasan.com/2011/full-sizebackground-image -jquery-plugin/

(我都用过它们)

我在您的代码中注意到的第一件事是，您可能需要如下设置背景图片:

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

还要注意第二行(next.)您仍在使用imgSrc吗?我想您是要使用imgSrc1代替?

Because of this background image's fadeInOut transitions produces weird effect in white all the texts i decided to program my own custom image rotator with fadeinout effect

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);
});

the interval thing and the image calculation seems to work fine, but i don't know why the bgImgaes are actually not being applied,

Testing here for now http://jsfiddle.net/bE9Dq/27/

any idea??

解决方案

Well for starters it might save you some time and a few headaches to use one of these plugins:

• http://buildinternet.com/project/supersized/
• http://bavotasan.com/2011/full-sizebackground-image-jquery-plugin/

(I've used them both)

First thing I've noticed with your code is you may need to set the background image as follows:

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

Also notice on the second line ( the next.) you are still using imgSrc I think you mean to use imgSrc1 instead?

这篇关于自定义背景fadeInOut画廊的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！