循环css背景

嘿，我只是想知道如何循环一堆图像，并将它们设置为div的背景。

我要做的是：将第一个图像设置为div的背景。 等X秒。 将下一个图像设置为背景。 等待X秒……等等并继续

我有以下代码适用于1张图片。

$(document).ready(function() { var source = $(".field-field-background img:first").attr("src"); $('.field-field-background img:first').remove(); $('#main-inner').css('background', 'url('+ source +') no-repeat'); }); 

我猜我需要得到一个图像源数组，循环遍历数组并将其设置为背景，在循环中的某处有延迟。 我有什么想法吗？

Answer 1

jQuery的一大优势是它拥有一个非常强大的插件社区 。 您可能希望完成的许多任务在您之前已被其他人处理。 特别是在这样的常见任务中，我建议在尝试重新发明轮子之前先找一个插件。 许多插件的优势在于经过了严格的测试和多个版本，从而产生了精美的产品。

如果您希望执行幻灯片类型效果， jQuery Cycle插件将是一个很好的选择。 如果你想要的是循环背景，同时保留前景元素，你可能会看到更像这样的东西： 高级jQuery背景图片幻灯片

Answer 2

 $(document).ready(function() { Cycler={}; Cycler.src=['path/to/img1', 'path/to/img2', 'path/to/img3']; Cycler.cur=0; Cycler.cycle=function() { if(++Cycler.cur>=Cycler.src.length) { Cycler.cur=0; } $('#main-inner').css('background', 'url('+ Cycler.src[Cycler.cur] +') no-repeat'); setTimeout(Cycler.cycle, 5000);//5 seconds } Cycler.cycle(); }); 

Answer 3

试试这个：

 setInterval(function(){ var source = $(".field-field-background img:first").attr("src"); $('.field-field-background img:first').remove(); $('#main-inner').css('background', 'url('+ source +') no-repeat'); },4000);