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

Question

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

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

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

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

所以，我想要一个 Div-Element，它有一个随机的背景图片(它总是随机的，当用户重新加载页面时它会变成另一个随机的背景图片)并且它会在 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>