为CSS行的简单Javascript选项预加载图像和转换

这是我在这里的第一个问题,我真的很尴尬。 如果我打破了不为人知的礼仪,我会提前道歉。

我有一个问题,我需要填充响应div行的背景,旋转背景图像预加载,并在图像之间平滑过渡。 我正在通过CSS控制COVER设置。

我有一个原油,但工作的js样品..但没有预加载和没有平滑的过渡。 请告知我如何通过平滑过渡完成预加载 –

CSS:

.row-bkg background-size: cover !important; background-repeat: no-repeat; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; 

Javascript :(这有效但非常基本。我需要一个带有预加载图像的软转换)

 $(function() { var header = jQuery('.row-bkg'); var backgrounds = new Array( 'url(images/banner.jpg)', 'url(images/banner2.jpg)' ); var current = 0; function nextBackground() { header.css('background',backgrounds[current = ++current % backgrounds.length]); setTimeout(nextBackground, 6000); } setTimeout(nextBackground, 6000); header.css('background', backgrounds[0]); }); 

上面的工作再次粗略地说..我只需要它在横幅之间轻轻淡化并预加载图像,这样它就不会每次都显示图像下载。

关于如何调整这个Javascript来实现它的任何想法? 也许有人可以推荐一个可以使用的脚本,允许我通过CSS设置细节?

在此先感谢您的时间。

顺便说一句..这是它只能在我现有的响应代码中。 我正在向现有的响应式CSS添加custom.css。

 

你走在正确的轨道上……

然而,没有办法平滑过渡background图像 – 如果你想要平滑的淡入/淡出 – 你将不得不在你的html中使用不同的方法:

 

哪,巧合地解决了你的预装问题…

然后,您将对它们进行样式设置,使它们堆叠在彼此之上,并执行以下操作:

$(function(){var current = 0; var zindex = parseInt(“ – ”+ $(“header> img”)。length);

  $("header > img").each(function(i) { $(this).css("z-index", "-" + i); }) function nextBackground() { $("header img:nth-child(" + (current++) + ")").animate({"opacity": "0"}, 400, function() { $(this).css({ "z-index" : zindex, "opacity" : "1" }); }); $("header > img").each(function() { $(this).css("z-index", parseInt($(this).css("z-index")) + 1); }); 

//当前++; if(current> $(“header> img”)。length){current = 0; } setTimeout(nextBackground,1000);

  } setTimeout(nextBackground, 1000); }); 

^那样的东西^应该工作

这是一个JSFiddle:

http://jsfiddle.net/4LFnK/2/

现在,我们是否应该详细介绍这个机制?

有动画持续时间400,顺便说一句 –

所有发生的事情,你隐藏图像,然后将其移动到堆栈的最后…这发生在动画中,当动画完成时,它将不透明度重置为1,并设置zindex到它需要去的最低点 –

然后,它为每个z-index添加1,这样它们都可以向前移动一个槽,为下一个被移回的槽腾出空间 – 这样,它们可以无缝循环。

无论你在那里放了多少张图片,这段代码都会缩放…

任何问题? ^ _ ^