WordPress子比主题首页添加动态的图片展示，其他程序也可以用，复制代码到相应位置即可，可以作为广告展示，也可作为指定分类，重点内容等，可以适合各个场景，需要的自取。

效果演示

实现代码

添加到 外观-小工具-首页主内容上方

<style>
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        .one {
            margin: 10px auto;
            height: 160px;
            overflow: hidden;
            position: relative;
            width: 100%;
            white-space: nowrap; /* 防止换行 */
        }

        .one ul {
            height: 160px;
            width: 100000px;
            position: absolute;
            left: 0;
            top: 0;
            padding: 0;
        }

        .one ul li {
            display: inline-block;
            margin: 5px;
            height: 150px;
            border-radius: 20px;
            position: relative;
            width: auto;
        }

        .one ul li a {
            display: inline-block;
            height: 150px;
            position: relative;
        }

        .one ul li img {
            border-radius: 20px;
            display: block;
            height: 150px;
        }

        .one ul li a span {
            height: 0;
            display: block;
            background: #f9f9f9cc;
            position: absolute;
            bottom: 0;
            color: #ff4f4f;
            font-size: 0px;
            opacity: 0;
            overflow: hidden;
            transition: all 0.7s;
            text-align: center;
            width: 100%;
            border-radius: 0 0 20px 20px;
        }

        .one ul li a:hover span {
            height: 150px;
            line-height: 150px;
            font-size: 20px;
            opacity: 1;
        }

        /* 你可以复制.two部分并调整样式来实现第二个滚动广告条 */
    </style>


<div class="tuc-2ea177b2-ecbeb3-0 one tuc-2ea177b2-ecbeb3-0">
    <ul style="left: 0;">
        <li><a href="/"><img src="https://xylxym.com/wp-content/uploads/2025/06/20250621151537466-19823769_094151048088_2.jpg" /><span>APP封装 签名 分发</span></a></li>
        <li><a href="/"><img src="https://xylxym.com/wp-content/uploads/2025/05/20250519120532126-2.png" /><span>承接各类推广广告</span></a></li>
        <li><a href="/"><img src="https://xylxym.com/wp-content/uploads/2025/05/20250519120532126-2.png" /><span>承接各类推广广告</span></a></li>
        <li><a href="/"><img src="https://xylxym.com/wp-content/uploads/2025/05/20250519120538798-4.jpg" /><span>承接各类推广广告</span></a></li>
        <li><a href="/"><img src="https://xylxym.com/wp-content/uploads/2025/05/20250519120532126-2.png" /><span>承接各类推广广告</span></a></li>
        <li><a href="/"><img src="https://xylxym.com/wp-content/uploads/2025/05/20250519120532126-2.png" /><span>承接各类推广广告</span></a></li>
        <li><a href="/"><img src="https://xylxym.com/wp-content/uploads/2025/05/20250519120532126-2.png" /><span>承接各类推广广告</span></a></li>
        <li><a href="/"><img src="https://xylxym.com/wp-content/uploads/2025/05/20250519120532126-2.png" /><span>承接各类推广广告</span></a></li>
        <li><a href="/"><img src="https://xylxym.com/wp-content/uploads/2025/05/20250519120532126-2.png" /><span>APP封装 签名 分发</span></a></li>
        <li><a href="/"><img src="https://xylxym.com/wp-content/uploads/2025/05/20250519120532126-2.png" /><span>承接各类推广广告</span></a></li>
        <li><a href="/"><img src="https://xylxym.com/wp-content/uploads/2025/05/20250519120532126-2.png" /><span>承接各类推广广告</span></a></li>
        <li><a href="/"><img src="https://xylxym.com/wp-content/uploads/2025/05/20250519120532126-2.png" /><span>承接各类推广广告</span></a></li>
        <li><a href="/"><img src="https://xylxym.com/wp-content/uploads/2025/05/20250519120532126-2.png" /><span>承接各类推广广告</span></a></li>
        <li><a href="/"><img src="https://xylxym.com/wp-content/uploads/2025/05/20250519120532126-2.png" /><span>承接各类推广广告</span></a></li>
        <li><a href="/"><img src="https://xylxym.com/wp-content/uploads/2025/05/20250519120532126-2.png" /><span>承接各类推广广告</span></a></li>
        <li><a href="/"><img src="https://xylxym.com/wp-content/uploads/2025/05/20250519120532126-2.png" /><span>承接各类推广广告</span></a></li>
    </ul>
</div>

<!-- 引入 jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<script>
    (function () {
        window.requestAnimationFrame = window.requestAnimationFrame || function (fn) {
            return setTimeout(fn, 1000 / 60);
        };
        window.cancelAnimationFrame = window.cancelAnimationFrame || clearTimeout;
    })();

    $(document).ready(function () {
        var box0 = $(".one"), v0 = 0.5;

        Rin(box0, v0);

        function Rin($Box, v) {
            var $Box_ul = $Box.find("ul"),
                $Box_li = $Box_ul.find("li"),
                left = 0,
                s = 0,
                timer;

            // 修复容器宽度为 0 的问题
            var boxWidth = $Box.get(0) ? $Box.get(0).offsetWidth : 0;

            $Box_li.each(function () {
                s += $(this).outerWidth(true);
            });

            if (s > 0 && s >= boxWidth) {
                $Box_li.clone().appendTo($Box_ul);
                Tmove();

                function Tmove() {
                    left -= v;
                    if (left <= -s) {
                        left = 0;
                        $Box_ul.css("left", left);
                    } else {
                        $Box_ul.css("left", left);
                    }
                    timer = requestAnimationFrame(Tmove);
                }

                $Box_ul.hover(function () {
                    cancelAnimationFrame(timer);
                }, function () {
                    Tmove();
                });
            }
        }
    });
</script>