网站点击更换背景特效代码！放到首页合适位置即可

网站点击更换背景特效代码！放到首页合适位置即可

图片自己更换 按钮文字直接更改

没有写 css 引用 直接写在代码里了 ！便于添加

刷新网页背景还是自己更换的！除非重新打开网站 已经加入缓存

<!-- 按钮，点击它来更换背景图片 -->
<a class="btn btn-primary btn-lg btn-block" id="changeBgButton" data-toggle="tooltip" data-placement="top"
    title="更换网站背景" href="#" target="_self" role="button">
    更换网站背景
</a>

<script>
    // 使用DOMContentLoaded事件确保在页面DOM结构加载完成后再执行后续操作
    document.addEventListener('DOMContentLoaded', function () {
        // 获取按钮元素
        const changeBgButton = document.getElementById('changeBgButton');
        // 当前显示的背景图片索引
        let currentBgIndex;

        // 检查本地存储中是否有保存的背景图索引
        const savedBgIndex = localStorage.getItem('backgroundImageIndex');
        if (savedBgIndex!== null) {
            currentBgIndex = parseInt(savedBgIndex);
        } else {
            // 如果本地存储中没有，默认显示第2张图片（索引为1）
            currentBgIndex = 1;
        }

        const bgImages = [
            "https://assets.da8m.cn/3ab2a0be3852c5a4af9f588ac1b36898e6e74863.jpg",
            "https://assets.da8m.cn/217d28eae100cb75e0dbbc6c17c87cb81a2b8193.jpg",
            // 新增的5张图片链接
            "https://assets.da8m.cn/d03c503c569256f95b70699b0d7f52e13b0ab90d.jpg",
            "https://assets.da8m.cn/76934b34ba37da2c665cea4e9ae3d62e46581750.jpg"
        ];

        // 设置初始背景图片
        document.body.style.backgroundImage = `url(${bgImages[currentBgIndex]})`;

        // 给按钮添加点击事件监听器
        changeBgButton.addEventListener('click', function () {
            // 更新当前背景图片索引，循环切换
            currentBgIndex = (currentBgIndex + 1) % bgImages.length;
            // 将新的背景图索引存储到本地存储中
            localStorage.setItem('backgroundImageIndex', currentBgIndex);
            document.body.style.backgroundImage = `url(${bgImages[currentBgIndex]})`;
        });
    });
</script>