Question

嘿，我只是想知道如何循环浏览一堆图像，并将它们设置为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的一大优势是它有一个very robust plug-in community。您可能希望完成的许多任务在您之前已被其他人解决。特别是在这样的常见任务中，我建议在尝试重新发明轮子之前先找一个插件。许多插件的优势在于经过了严格的测试和多个版本，从而产生了精美的产品。

如果您希望进行幻灯片效果，jQuery Cycle plug-in将是一个不错的选择。如果你想要的是循环背景，同时保留前景元素，你可能会看到更像这样的东西：Advanced jQuery background image slideshow

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

循环css背景

3 个答案: