自定义背景淡入淡出画廊
因此 背景图像的淡入淡出过渡会产生奇怪的效果所有文本均为白色 我决定编写自己的自定义图像旋转器，具有淡出效果，
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/
想法吗？
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??
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
对于初学者来说，使用以下插件之一可能会节省您一些时间并减少一些麻烦：
（我都使用过它们）
我在你的代码中注意到的第一件事是你可能需要按如下方式设置背景图像：
另请注意第二行（
next.）您仍在使用imgSrc我认为您的意思是使用imgSrc1< /代码> 反而？Well for starters it might save you some time and a few headaches to use one of these plugins:
(I've used them both)
First thing I've noticed with your code is you may need to set the background image as follows:
Also notice on the second line ( the
next.) you are still usingimgSrcI think you mean to useimgSrc1instead?