Question

如何让我的内联样式div在5秒后更改背景图片网址？

示例：

<div class="foobar" style=" background:(url'red.png')"> </div>

5秒后，需要：

<div class="foobar" style=" background:(url'blue.png')"> </div>

5秒后，需要：

<div class="foobar" style=" background:(url'yellow.png')"> </div>

因此，它可以在这个foobar，红色，蓝色和黄色背景图像中循环3个图像。

以下是我到目前为止所做的尝试： Working fiddle

Answer 1

您必须改为使用setInterval()：

setInterval(nextBackground, 5000);

如果您希望平滑淡入使用 fadeIn() 功能：

imagrep.hide().fadeIn();

注意： fadeIn()仅适用于我们必须先隐藏元素的隐藏元素。

希望这有帮助。

$(function() {
  var imagrep = $('.foobar');
  var backgrounds = ['url(http://images.huffingtonpost.com/2016-03-02-1456944747-2376497-naturehike.jpg)', 'url(http://www.mindful.org/wp-content/uploads/2016/03/nature.jpg','url(http://www.planwallpaper.com/static/images/3d-nature-wallpaper1.jpg)'];
  var current = 0;

  function nextBackground() {
    imagrep.css('background',backgrounds[current]);
    imagrep.hide().fadeIn();
    
    if(current==backgrounds.length-1)
      current=0;
    else
      current++;
  }
  
  setInterval(nextBackground,2000);
});

.foobar {
  height: 400px;
  width: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="foobar" style="background:url(http://www.planwallpaper.com/static/images/3d-nature-wallpaper1.jpg);">
</div>

Answer 2

您无法为背景图像（或带图像的背景）属性设置动画，但您可以获得类似的效果：

imagrep.animate({opacity: 0}, 'slow', function() {
    imagrep.css({'background-image': backgrounds[current = ++current % backgrounds.length]}).animate({opacity: 1});
});

将不透明度设置为0，然后更改图像，最后将不透明度设置为1。

这是一个jsfiddle：http://jsfiddle.net/m61u51xt/3/

Answer 3

最好的方法是使用jquery Cycle插件。您可以从

下载

http://jquery.malsup.com/cycle/

它是开源的，易于实现，此外还可以添加各种效果，如fadein，zoom和suffle等。

背景中的褪色效果

3 个答案: