将随机背景图像更改为另一个随机背景（使用淡入淡出过渡）答案

【问题标题】：Change Random background image to another random background (with Fade Transition)将随机背景图像更改为另一个随机背景（使用淡入淡出过渡）
【发布时间】：2014-03-10 15:47:17
【问题描述】：

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

它还应该在 3-5 秒后更改为另一个随机选择的带有淡入淡出过渡的背景图像。

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

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

所以，我想要一个 Div-Element，它有一个随机背景图像（它始终是随机的，当用户重新加载页面时会更改为另一个随机背景图像），并且在 3- 之后它会更改为另一个随机背景图像淡入淡出效果 5 秒。

【问题讨论】：

标签： javascript jquery image random fade

【解决方案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>

【讨论】：

@Tankslacno ：很高兴解决您的问题 :)。不要忘记投票并将其标记为答案，以便它也可以帮助其他用户。

【解决方案2】：

您可以尝试使用 javascript Random 函数来解决该问题，并为您的背景图像提供与数字相关联的不同 ID，然后就可以进行随机随机播放了

【讨论】：

【解决方案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;
}

来源：Random color generator in JavaScript

比放一些魔法... 工作演示：http://fiddle.jshell.net/re353/

【讨论】：