循环CSS背景 [英] Cycle css backgrounds

问题描述

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

Hey, I'm just wondering how to cycle through a bunch of images, and set them as the background for a div.

我想要做的是:将第一张图片设置为div的背景.等待X秒钟.将下一张图像设置为背景.等待X秒钟……等等，然后继续

What I'm looking to do is: set the first image as the background to a div. Wait X seconds. Set the next image as the background. Wait X seconds … etc. and continue

我有以下适用于1张图像的代码.

I've got the following code which works for 1 image.

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

我猜我需要获取一个图像源数组，循环遍历该数组并将其设置为背景，并在循环中的某个位置进行延迟.有什么想法我会怎么做吗?

I'm guessing I need to get an array of the image sources, loop through the array and set it as the background, with a delay somewhere in the loop. Any ideas how I'd do this?

推荐答案

jQuery的最大优点之一是它具有

One of the biggest advantages of jQuery is that it has a very robust plug-in community. Many tasks that you might want to accomplished have been tackled by others before you. Particularly with a common task like this, I would recommend looking for a plug-in first, before trying to reinvent the wheel. Many plug-ins have the advantage of having gone through rigorous testing and multiple versions, to result in a polished product.

如果您正在寻找 jQuery Cycle插件，将是一个不错的选择进行幻灯片显示效果.如果要循环显示背景，同时保留前景元素，则可以查看以下类似内容:

The jQuery Cycle plug-in would be a good candidate, if you are looking to do a slideshow type effect. If what you want is to cycle the background, while keeping foreground elements, you might look at something more like this: Advanced jQuery background image slideshow

这篇关于循环CSS背景的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！