将随机背景图像更改为另一个随机背景(具有淡出过渡)
我试图建立一个网站，其中的背景图像的Div-元素变化，每次用户重新加载页面。该分区元素的背景图像应该总是随机的。
它还应该改变为另一个随机选择的背景图像，在3-5秒后淡出过渡。
我一直在尝试Jquery.Cycle2.js和Jquery.shuffle.js，它们在我进行转换时工作得很好，但是它们不会变成随机的背景图像。当有人重新加载页面时，它们也不会将背景图像更改为随机图像。
我还尝试了image = new，并使用了Math.round和Math.random JavaScript元素。当有人刷新/重新加载页面时，当我想要随机背景图像时，它们工作得很好，但它没有将它更改为另一个随机背景图像(因此，不执行转换)。
所以，我想要一个Div元素，它有一个随机的背景图像(当用户重新加载页面时，它总是随机的，并改变到另一个随机的背景图像)，它在3-5秒后改变为另一个随机背景图像，具有淡出效果。
回答 3
Stack Overflow用户
发布于 2014-02-12 11:47:35
为主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>Stack Overflow用户
发布于 2014-02-12 10:59:32
您可以尝试使用javascript随机函数来解决这个问题，并给出与数字相关的背景图像不同的ID，然后进行随机洗牌
Stack Overflow用户
发布于 2014-02-12 11:18:35
我会用这样的方法：
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;
}来源：Random color generator in JavaScript
也不愿在.工作演示：http://fiddle.jshell.net/re353/
https://stackoverflow.com/questions/21725888
复制相似问题
腾讯云开发者
