使背景图像动态并每隔几秒钟更改一次答案

【问题标题】：making a background image dynamic and change every few seconds使背景图像动态并每隔几秒钟更改一次
【发布时间】：2021-07-22 08:11:08
【问题描述】：

我的代码在做什么：

创建一个img 标签，每 3 秒更改一次图像。
背景图片是静态的
目前，我们有一个动态的img 标记，它在静态背景之上每 3 秒更改一次。因为这是一个测试，看看我可以让它动态

我想做的事：

script 标记内的背景图像以更改并以某种方式使 URL() 动态化。背景图片应该会在 3 秒内改变

<div class="text-center background">

    <p>come content</p>

    <img id="image" src="~/images/baseball.jpg">
    
    <script type = "text/javascript">
        var image = document.getElementById("image");
        var currentPos = 0;
        var images = ["/images/baseball.jpg", "/images/basketball.jpg", "/images/football.jpg", "/images/soccerball.jpg"], i = 0;

        function changeimage()
        {
            if (++currentPos >= images.length)
                currentPos = 0;

            image.src = images[currentPos];
        }
        setInterval(changeimage, 3000);
    </script>

</div>

<style>
.background{
    background-image: url(/images/basketball.jpg); //<<<-----this line needs to be dynamic
    background-repeat: no-repeat;
    background-size: cover;
    height: 1000px;
}
</style>

我知道我可能需要稍微重构一下我的代码。我只是不知道如何在有背景的情况下去做。使用普通图像标签很容易，因为我只需将新图像路径重新分配给旧 ID。

其他信息：

框架：.netcore-mvc

引导程序：4.6

【问题讨论】：

您可以删除 razor 和 asp 标签，您的尝试和预期的解决方案将在 javascript 中，因此服务器架构无关紧要。
stackoverflow.com/a/7319497/31782 ?没有Javascript。

标签： c# css background-image

【解决方案1】：

只需设置背景元素的样式，它实际上与您当前的解决方案相同：

在 SO 上有一个很好的解决方案：[Changing background-image with JavaScript]

<div id="background" class="text-center background">

    <p>come content</p>
        
    <script type = "text/javascript">
        var background = document.getElementById("background");
        var currentPos = 0;
        var images = ["/images/baseball.jpg", "/images/basketball.jpg", "/images/football.jpg", "/images/soccerball.jpg"], i = 0;

        function changeimage()
        {
            if (++currentPos >= images.length)
                currentPos = 0;

            background.style.backgroundImage = "url(" + images[currentPos] + ")";
        }
        setInterval(changeimage, 3000);
    </script>

</div>

这个解决方案是纯 HTML Javascript，如果你想在服务器上运行计时逻辑，有图像轮播控件和基于组件的解决方案会有所帮助，但是这个 javascript 是一个非常简单的问题解决方案。

【讨论】：