自动刷新图片附源代码

⚠️ 本文最后更新于2024年07月09日，已经过了135天没有更新，若内容或图片失效，请留言反馈

接口用的我的美女图片接口如果你有好的美图接口可以修改一下代码，每5秒刷新一张图片，代码来自别人写的，消耗流量有点多，建议电脑打开按F11欣赏。

预览

源代码：

<html>
<head>
   <style type="text/css">
        .bg {
            width: 100%;
            height: 100%;
            position: fixed;
            z-index: -1;
            background-position: center;
            background-repeat: no-repeat;
            background-attachment: fixed;
            background-size: cover;
            animation: bg 10s infinite;
        }
        #bg1 {
            background-image: url('//cdn.seovx.com/?mom=302&1');
        }
        #bg2 {
            animation-delay: 5s;            /* bg2延迟5秒开始。同时bg2一开始无图片，使bg1淡入时背景为白色而不是另一张图片 */
        }
        @keyframes bg{
            0%{transform: scale(1.5, 1.5);opacity: 0;}
            20%{opacity: 1;}                /* 0~2s 载入 */
            30%{transform: scale(1, 1);}            /* 0~3s图片缩放 */
            50%{opacity: 1;}                /* 5~7s 淡出 */
            70%{opacity: 0;}                /* 7~10s 图片隐藏。另一个背景在本背景淡出同时载入 */
            100%{opacity: 0;}
        }
    </style>
</head>
<body>
    <div id="bg2" class="bg"></div>
    <div id="bg1" class="bg"></div>
</body>
<script type="text/javascript">
    countImg = 1;
    countTime = 0;
    bg1Container = document.getElementById("bg1");
    bg2Container = document.getElementById("bg2");
    setInterval(function(){
        // 一个轮回为10秒（2个图片，第1张0-5s，第2张5-10s），每个背景在淡出后（第7秒）更新图片
        countTime += 1;
        if(countTime % 10 == 7){
            countImg += 1;
            bg1Container.style = `background-image: url(https://cdn.seovx.com/?mom=302&${countImg})`;
        }else if((countTime + 5) % 10 == 7){    // 第2张图片默认无图片，比第一张延迟5s开始动画，+5保证了在第2秒开始加载图片
            countImg += 1;
            bg2Container.style = `background-image: url(https://cdn.seovx.com/?mom=302&${countImg})`;
        }
    }, 1000);
</script>
</html>

By 懒人 On 2023年2月9日