按钮（上部小园图）打开《 烟雨云台》有代码 转自马黑教程专版

admin

admin

<style>
    @import 'https://638183.freep.cn/638183/web/api/audioplayer.css';
    .pa { --offsetX: 81px; --bg: url('https://638183.freep.cn/638183/t24/7/h810.jpg') no-repeat center/cover; color: lightgreen; }
    .player { width: 480px; bottom: 10px; }
    .btnFs { top: 25px; right: 20px; }
    #player1 { position: absolute; top: 30px; width: 28%; height: 15%; overflow: hidden; }
    .mpic { position: absolute; left: 0; height: 100%; white-space: nowrap; animation: move 50s linear infinite var(--state); }
    .mpic img { height: 100%; height: 100%; aspect-ratio: 1/1; border-radius: 50%; opacity: 0.5; transition: 1s; cursor: pointer; }
    .mpic img:hover { opacity: 1; }
    @keyframes move { to { transform: translateX(-50%); } }
</style>

<div id="pa" class="pa">
    <video class="pd-vid" src="https://img2.tukuppt.com/video_show/15653652/00/80/83/60d04564c32f7.mp4" autoplay loop muted></video>
    <div id="player1">
        <div class="mpic">
            <img src="https://638183.freep.cn/638183/t23/3/lkp.jpg" load="lazy" alt="" />
            <img src="https://638183.freep.cn/638183/t23/3/cloud.jpg" load="lazy" alt="" />
            <img src="https://638183.freep.cn/638183/t24/7/h810.jpg" load="lazy" alt="" />
            <img src="https://638183.freep.cn/638183/t23/3/008.jpg" load="lazy" alt="" />
            <img src="https://638183.freep.cn/638183/t23/3/lkp.jpg" load="lazy" alt="" />
            <img src="https://638183.freep.cn/638183/t23/3/cloud.jpg" load="lazy" alt="" />
            <img src="https://638183.freep.cn/638183/t24/7/h810.jpg" load="lazy" alt="" />
            <img src="https://638183.freep.cn/638183/t23/3/008.jpg" load="lazy" alt="" />
        </div>
    </div>
</div>

<script>
    var options = {
        pa: '.pa',
        urls: [['https://music.163.com/song/media/outer/url?id=2088974054', '烟雨云台']],
    };

    loadJs('https://638183.freep.cn/638183/web/api/audioplayer.min.js', tzRun);

    function tzRun() {
        var aud = new AudPlayer(options);
        const pics = document.querySelectorAll('.mpic img');
        pics.forEach(pic => {
            pic.title = '更换背景';
            pic.onclick = () => aud.pa.style.backgroundImage = `url(${pic.src})`;
        });
    }

    function loadJs(url, callback) {
        var script = document.createElement('script');
        script.charset = 'utf-8';
        script.src = url;
        script.onload = function() {
            if (callback) callback();
        };
        document.head.appendChild(script);
    }
</script>