如何在.NET Core MVC项目中实现background-image每3秒动态切换

现有代码功能说明 #

• 创建了img标签，可每3秒切换一次图片
• 背景图片当前为静态
• 目前是在静态背景层上方叠加了每3秒切换的动态img标签，仅作为动态效果测试使用

需求说明 #

通过script标签控制background-image的url()动态更新，实现背景图每3秒切换一次。

调整后完整代码 #

<div class="text-center background">
    <p>some content</p>
    
    <script type = "text/javascript">
        // 获取背景容器元素
        var backgroundEl = document.querySelector('.background');
        var currentPos = 0;
        var images = ["/images/baseball.jpg", "/images/basketball.jpg", "/images/football.jpg", "/images/soccerball.jpg"];

        function changeBackground()
        {
            if (++currentPos >= images.length)
                currentPos = 0;
            // 拼接合法的backgroundImage属性值并赋值
            backgroundEl.style.backgroundImage = `url(${images[currentPos]})`;
        }
        setInterval(changeBackground, 3000);
    </script>
</div>

<style>
.background{
    /* 初始静态背景保留，作为页面加载时的兜底展示 */
    background-image: url(/images/basketball.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    height: 1000px;
}
</style>

改动说明 #

• 移除了测试用的img标签，无需额外DOM元素作为切换载体
• 脚本直接选中.background容器，修改其style.backgroundImage属性，注意属性值需要用url()包裹图片路径，和CSS写法规则一致
• 原有CSS里的静态背景保留即可，作为页面刚加载时的兜底展示，不会影响动态切换逻辑
• 若需兼容IE等低版本浏览器，将脚本里的模板字符串替换为普通字符串拼接即可：backgroundEl.style.backgroundImage = 'url(' + images[currentPos] + ')'
• 该方案完全兼容你使用的.NET Core MVC框架和Bootstrap 4.6版本，图片路径规则和原有写法保持一致即可，无需额外调整

内容的提问来源于stack exchange，提问作者jgrewal