javascript - WordPress 中 JavaScript 的动态内容

Question

如果在使用 Wordpress 的网站上获得此全屏背景 slider (维加斯)。现在使用以下脚本调用 slider :

<script>
        $("body").vegas({
            delay: 7000,
            timer: false,
            shuffle: true,
            transition: 'fade',
            transitionDuration: 2000,
            slides: [
                { src: "photo01.jpg" },
                { src: "photo02.jpg" },
                { src: "photo03.jpg" },
                { src: "photo04.jpg" }
            ],

            overlay: '01.png'
        });
        </script>

在 WordPress 中，可以创建一个循环来“循环”该文件中的内容。我想做的是这样的:

....   
    slides: [
                    <?php get_template_part('loop-backgrounds'); ?>
                    { src: "some-file-to-stop-the-backgrounds.jpg" }
                ],
....

循环背景看起来像这样:

    <?php $loop = new WP_Query( array( 'post_type' => 'backgrounds', 'posts_per_page' => -1, 'orderby'=>'id', 'order' => 'ASC') );
        while ( $loop->have_posts() ) : $loop->the_post(); ?>

        { src: <?php if ( has_post_thumbnail() ) {
                the_post_thumbnail();
            } ;?> },

<?php endwhile; wp_reset_query(); ?>

此 some-file-to-stop-the-backgrounds.jpg 末尾没有 ,，因此不会破坏代码(我思考)。这有可能吗？

Answer 1

由于您使用的是 WordPress，所以我只想找到一个全宽背景 slider 插件，它可以开箱即用地满足您的需求。我用这个full width background slider在我的一些网站上，它运行良好且加载速度快。

尝试一下，希望这会有所帮助。