时间戳

首页 > 解决方案 > 使背景图像动态并每隔几秒钟更改一次

c# - 使背景图像动态并每隔几秒钟更改一次

问题描述

我的代码在做什么：

我想做的事：

<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

标签： c#cssbackground-image

解决方案

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

SO上有一个很好的解决方案：[使用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 是一个非常简单的问题解决方案。

推荐阅读