将随机背景图像更改为另一个随机背景(使用淡入淡出过渡)

Question

我正在尝试创建一个网站，每次用户重新加载页面时，div元素的背景图像都会发生变化。Div元素的背景图像应该总是随机的。

它还应该在3-5秒后变为另一个随机选择的背景图像，并进行渐变。

我一直在尝试Jquery.Cycle2.js和Jquery.shuffle.js，当我进行转换时，它们运行良好，但它们不会变为随机背景图像。当有人重新加载页面时，他们也不会将背景图像更改为随机图像。

我也一直在尝试image＝new Array，并使用Math.round和Math.random JavaScript元素。当有人刷新/重新加载页面时，当我想要随机背景图像时，它们工作得很好，但它不会将其更改为另一个随机背景图像(因此，不会进行转换)。

所以，我想要一个Div元素，它有一个随机的背景图像(它总是随机的，当用户重新加载页面时，它会变成另一个随机背景图像)，3-5秒后，它会变为另一个具有渐变效果的随机背景图像。

Answer 1

在主div中为图像创建一个div，如下所述：

<div style="height: 500%">
<div id="imageDiv" class="imageContainer"></div>
Spider Code
</div>

设置CSS"imageContainer"：

.imageContainer {
width: 100%;
height: 100%;
position: absolute;
opacity: 0.5;
z-index: -1;
background-repeat: no-repeat;
}

现在，在您的解决方案文件夹中添加几个图像，并为此创建阵列。在我的情况下，图像的名称是1.png，2.png等…

并创建如下所述的脚本：

<script type="text/javascript" language="javascript">
var myImages = new Array("1.png", "2.png", "3.png", "4.png", "5.png");
$(document).ready(function() {
var random = myImages[Math.floor(Math.random() * myImages.length)];
random = 'url(images/' + random + ')';
$('#imageDiv').css('background-image', random);
setInterval(function() {
SetImage();
}, 5000);
});
function SetImage() {
var random = myImages[Math.floor(Math.random() * myImages.length)];
random = 'url(images/' + random + ')';
$('#imageDiv').fadeOut(2000);
setTimeout(function () {
$('#imageDiv').css('background-image', random);
$('#imageDiv').fadeIn(2000);
}, 2000);
}
</script>

Answer 2

您可以尝试使用javascript Random函数来解决这个问题，并为您的背景图像提供不同的ID，这些ID将与数字相关联，这样，您就可以获得随机洗牌

Answer 3

我会使用这样的东西：

function get_random_color() {
var letters = '0123456789ABCDEF'.split('');
var color = '#';
for (var i = 0; i < 6; i++ ) {
color += letters[Math.round(Math.random() * 15)];
}
return color;
}

来源：JavaScript 中的随机颜色生成器

比在。。。工作演示：http://fiddle.jshell.net/re353/