循环的CSS背景

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

我正在做的是：设置第一个图像作为背景的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'); 
});

我猜我需要通过阵列图像源的一个数组，循环，并将其设置为背景，与地方在循环的延迟。任何想法我会怎么做？

来源

2010-09-03 Conor Mongey

为什么推倒重来;）http://buildinternet.com/live/supersized/ – Tim 2010-09-03 14:47:19

有一个循环插件做的事情非常相似，不知道它是否会帮助你。 http://jquery.malsup.com/cycle/ – 2010-09-03 14:47:31

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

来源

2010-09-03 14:51:21 aularon

什么是Cycler？ – 2010-09-03 15:16:19

对不起，'Cylcler'是一个命名空间（如果你想这样命名的话就是一个临时对象），我是为了收集所有相关的东西，我只是忘了先用'Cycler = {};'来介绍。现在修复。 – aularon 2010-09-03 15:20:06

我爱你的方法比其他解决方案。如果您可以添加淡入淡出和淡出过渡效果代码，那将会很棒。 – 2011-07-13 09:15:53

试试这个：

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

来源

2010-09-03 14:52:35

一个jQuery的最大的优点是它有一个very robust plug-in community。你可能想要完成的许多任务在你之前已经被别人解决了。特别是对于像这样的常见任务，我建议首先寻找插件，然后再尝试重新发明轮子。许多插件具有经过严格测试和多个版本的优势，从而获得抛光产品。

jQuery Cycle plug-in将是一个很好的候选人，如果你正在寻找幻灯片式效果。如果你想要的是周期的背景下，同时保持前景元素，你可能看更多的东西是这样的：Advanced jQuery background image slideshow

来源

2010-09-03 17:14:15 Ender

循环的CSS背景

回答

相关问题