求可实现HTML页面每15/20秒自动切换背景的代码

以下是单HTML文件集成的实现方案，所有样式、逻辑都内置在文件内，不需要引入外部依赖，可直接复制使用：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录注册页</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            min-height: 100vh;
            /* 背景基础配置 */
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            background-attachment: fixed;
            /* 切换过渡动画 */
            transition: background-image 1.5s ease-in-out;
        }
        /* 登录表单容器示例样式，可自行替换为你自己的样式 */
        .login-form-wrap {
            width: 420px;
            background: rgba(255,255,255,0.92);
            padding: 35px;
            border-radius: 12px;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            box-shadow: 0 0 25px rgba(0,0,0,0.15);
            z-index: 999;
        }
    </style>
</head>
<body>
    <!-- 这里替换为你自己对接数据库的登录注册表单代码 -->
    <div class="login-form-wrap">
        <h2>账号登录</h2>
        <!-- 表单输入框、提交按钮等逻辑可自行开发 -->
    </div>

    <script>
        // 替换为你自己的背景图地址，可添加任意多张
        const bgImageList = [
            "./bg1.jpg",
            "./bg2.jpg",
            "./bg3.jpg"
        ];
        let currentIndex = 0;
        // 页面加载优先显示第一张背景
        document.body.style.backgroundImage = `url(${bgImageList[currentIndex]})`;
        
        // 自动切换逻辑，间隔时间单位为毫秒，15秒=15000、20秒=20000，可自行修改
        setInterval(() => {
            currentIndex = (currentIndex + 1) % bgImageList.length;
            document.body.style.backgroundImage = `url(${bgImageList[currentIndex]})`;
        }, 15000);
    </script>
</body>
</html>

• 切换间隔修改：找到setInterval的第二个参数，需要15秒切换填15000，20秒切换填20000即可
• 背景图替换：把bgImageList数组内的示例路径替换为你自己的背景图地址，支持添加任意数量的图片
• 过渡速度调整：修改body样式中transition: background-image 1.5s ease-in-out里的1.5s，数值越大切换动画越慢，越小越快
• 层级冲突解决：如果出现背景遮挡表单的情况，给表单容器添加position: relative; z-index: 999即可解决

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