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>

Answer 2

您可以尝试使用javascript随机函数来解决该问题，并为您的背景图像提供与数字相关联的不同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;
}

来源：Random color generator in JavaScript

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

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

3 个答案: