自定义背景淡出画廊

custom background fadeInOut gallery

本文关键字：淡出 背景 自定义      更新时间：2023-09-26

因为这个背景图像's的fdeinout过渡会在所有文本中产生奇怪的白色效果，所以我决定编写一个带有fdeinout效果的自定义图像旋转器

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代替?

相关文章：