Question

我正在使用代码随时间更改背景图片：

function getRandomInt(min, max)
{return Math.floor(Math.random()*(max-min+1))+min;}

function nextBackground()
{
    var url = "url('images/" + getRandomInt(1, 33) + ".jpg')";

    $body.css("background-image", url);
    setTimeout(nextBackground, 7000);
}
setTimeout(nextBackground, 7000);

但我希望图片不会那么急剧变化。有没有办法做到这一点？

Answer 1

你可以使用带有动画属性的CSS动画......但是这个不是。 this question的答案应该可以帮助您解决问题，基本上您应该将图像放在另一个图像后面，并将旧图像的不透明度平滑地调整到100％。

希望它有所帮助：）

Answer 2

如果您使用具有两个重叠图像的计时事件并且不透明度从1缓慢调整为0，那么这应该对您有用。

This may be useful.

Answer 3

您可以通过 transitioning the property 淡化下一张图片。这是一个在<div>的背景上进行基本操作的示例，但您可以通过更改nextBackground()函数中使用的选择器将其更改为文档的背景。 / p>

// If you put all the image paths into an array, the rest of the code gets much simpler
var images = ["https://images.seeklogo.net/2016/09/facebook-icon-preview-1.png",
              "https://www.brandsoftheworld.com/sites/default/files/styles/logo-thumbnail/public/062012/twitter-bird-light-bgs.png?itok=HAQz1yQN",
              "http://seeklogo.com/images/L/linkedin-icon-logo-05B2880899-seeklogo.com.gif",
             "https://www.youtube.com/yt/brand/media/image/YouTube-logo-full_color.png",
             "http://3835642c2693476aa717-d4b78efce91b9730bcca725cf9bb0b37.r51.cf1.rackcdn.com/Instagram_App_Large_May2016_200.png",
             "http://lescalier-montreal.com/restaurant-bar/wp-content/uploads/2014/07/small-red-googleplus-icon.png"];

function getRandomInt() {
  // No longer need min and max parameters, just the length of the array
  return Math.floor(Math.random() * images.length);
}

function nextBackground(){
  $("div").css("background-image", "url(" + images[getRandomInt()] + ")");
}

// For a continuously running timer, user setInterval, instead of setTimeout
setInterval(nextBackground, 1250);

div { 
  background-size:contain;
  /* 
    CSS transitions cause properties that change to transition to the new value
    There are numererous ways to configure the transition, but here, we're just
    saying that any properties that change on the div should take 1 second to transition
    from the old value to the new value.
  */
  transition:1s; 
  height:250px;
  width:250px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div></div>

顺利改变背景图片

3 个答案: