Javascript 在WordPress中加载帖子后，如何运行jQuery方法？

我正在用这个在网站上制作一个移动的电影带。加载到胶片带中的图像是自定义的post类型，每个图像都有一个标题并包含一个图像。该插件在包含任意数量图像的长div上水平滚动。我的问题是，即使在图像消失后，我也可以滚动似乎无限长的时间

以下是我对问题的分析：

jQuery(window).load(function() {
    jQuery("div#makeMeScrollable").smoothDivScroll({ 
        autoScroll: "onstart" , 
        autoScrollDirection: "backandforth", 
        autoScrollStep: 1, 
        autoScrollInterval: 15, 
        visibleHotSpots: "always"
    });

jQuery(document).ready(function() {
    jQuery("#makeMeScrollable").smoothDivScroll("disable");
});

<?php // Smooth Div Scroll inport for filmstrip galleries ?>
<script type="text/javascript" src="<?php bloginfo( 'stylesheet_directory' ); ?>/javascript/filmstrip.js"></script>
<script type="text/javascript" src="<?php bloginfo( 'stylesheet_directory' ); ?>/SmoothDivScroll-1.1/js/jquery.smoothDivScroll-1.1-min.js"></script>
</body>
</html>

<?php if(is_page('engagements')) { ?>
<div id="makeMeScrollable">
    <div class="scrollingHotSpotLeft"></div>
    <div class="scrollingHotSpotRight"></div>
    <div class="scrollWrapper">
        <div class="scrollableArea">
            <?php 
                $args = array( 'post_type' => 'engagement_photos' );
                $loop = new WP_Query( $args );
                while ( $loop->have_posts() ) : $loop->the_post();
                    the_content();
                endwhile;
            ?>
        </div>
    </div>
</div>
<?php } else if(is_page('weddings')) { ?>

• 我试着用普通图像代替 关于post循环，以及所有内容 按预期工作（无无限期） 滚动）
• 我已经尝试在document.ready和window.load之间设置脚本，而document.ready则根本不加载
• 我尝试调用一个公共函数“RecreacteScrollableArea”，以便在加载图像后计算面积，但没有效果，然后通过在脚本中调用jQuery中的警报框，我可以看到在加载图像之前仍在调用它

通常的外观： 它在滚动时的外观：

在页脚底部调用平滑Div滚动代码和以下初始化代码：

jQuery(window).load(function() {
    jQuery("div#makeMeScrollable").smoothDivScroll({ 
        autoScroll: "onstart" , 
        autoScrollDirection: "backandforth", 
        autoScrollStep: 1, 
        autoScrollInterval: 15, 
        visibleHotSpots: "always"
    });

jQuery(document).ready(function() {
    jQuery("#makeMeScrollable").smoothDivScroll("disable");
});

<?php // Smooth Div Scroll inport for filmstrip galleries ?>
<script type="text/javascript" src="<?php bloginfo( 'stylesheet_directory' ); ?>/javascript/filmstrip.js"></script>
<script type="text/javascript" src="<?php bloginfo( 'stylesheet_directory' ); ?>/SmoothDivScroll-1.1/js/jquery.smoothDivScroll-1.1-min.js"></script>
</body>
</html>

<?php if(is_page('engagements')) { ?>
<div id="makeMeScrollable">
    <div class="scrollingHotSpotLeft"></div>
    <div class="scrollingHotSpotRight"></div>
    <div class="scrollWrapper">
        <div class="scrollableArea">
            <?php 
                $args = array( 'post_type' => 'engagement_photos' );
                $loop = new WP_Query( $args );
                while ( $loop->have_posts() ) : $loop->the_post();
                    the_content();
                endwhile;
            ?>
        </div>
    </div>
</div>
<?php } else if(is_page('weddings')) { ?>

这就是我尝试修复大小调整时所做的：

jQuery(window).load(function() {
    jQuery("div#makeMeScrollable").smoothDivScroll({ 
        autoScroll: "onstart" , 
        autoScrollDirection: "backandforth", 
        autoScrollStep: 1, 
        autoScrollInterval: 15, 
        visibleHotSpots: "always"
    });

jQuery(document).ready(function() {
    jQuery("#makeMeScrollable").smoothDivScroll("disable");
});

<?php // Smooth Div Scroll inport for filmstrip galleries ?>
<script type="text/javascript" src="<?php bloginfo( 'stylesheet_directory' ); ?>/javascript/filmstrip.js"></script>
<script type="text/javascript" src="<?php bloginfo( 'stylesheet_directory' ); ?>/SmoothDivScroll-1.1/js/jquery.smoothDivScroll-1.1-min.js"></script>
</body>
</html>

<?php if(is_page('engagements')) { ?>
<div id="makeMeScrollable">
    <div class="scrollingHotSpotLeft"></div>
    <div class="scrollingHotSpotRight"></div>
    <div class="scrollWrapper">
        <div class="scrollableArea">
            <?php 
                $args = array( 'post_type' => 'engagement_photos' );
                $loop = new WP_Query( $args );
                while ( $loop->have_posts() ) : $loop->the_post();
                    the_content();
                endwhile;
            ?>
        </div>
    </div>
</div>
<?php } else if(is_page('weddings')) { ?>

我还应该提到，这些帖子的图片被“p”标签包围，但我不明白为什么会出现这样的问题

谢谢你的阅读

编辑： 这里还有一些代码，大部分代码都是库存代码，当普通的img被放置而不是循环时，它们就可以工作了

基本CSS和jQuery文件与此简单演示中的文件相同：

jQuery和jQuery UI导入（工作）

导入发生在页脚底部：

jQuery(window).load(function() {
    jQuery("div#makeMeScrollable").smoothDivScroll({ 
        autoScroll: "onstart" , 
        autoScrollDirection: "backandforth", 
        autoScrollStep: 1, 
        autoScrollInterval: 15, 
        visibleHotSpots: "always"
    });

jQuery(document).ready(function() {
    jQuery("#makeMeScrollable").smoothDivScroll("disable");
});

<?php // Smooth Div Scroll inport for filmstrip galleries ?>
<script type="text/javascript" src="<?php bloginfo( 'stylesheet_directory' ); ?>/javascript/filmstrip.js"></script>
<script type="text/javascript" src="<?php bloginfo( 'stylesheet_directory' ); ?>/SmoothDivScroll-1.1/js/jquery.smoothDivScroll-1.1-min.js"></script>
</body>
</html>

<?php if(is_page('engagements')) { ?>
<div id="makeMeScrollable">
    <div class="scrollingHotSpotLeft"></div>
    <div class="scrollingHotSpotRight"></div>
    <div class="scrollWrapper">
        <div class="scrollableArea">
            <?php 
                $args = array( 'post_type' => 'engagement_photos' );
                $loop = new WP_Query( $args );
                while ( $loop->have_posts() ) : $loop->the_post();
                    the_content();
                endwhile;
            ?>
        </div>
    </div>
</div>
<?php } else if(is_page('weddings')) { ?>

您可能希望在functions.php文件中尝试以下代码

function init_my_scripts()
{
    if (!is_admin())
    {
        wp_deregister_script('jquery');
        wp_register_script('jquery', 'http://code.jquery.com/jquery-1.6.1.min.js');
        wp_enqueue_script('jquery');

        wp_deregister_script('jQuery UI Core');
        wp_register_script( 'jQuery UI Core', 'https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js'); // register key jQueryUI with URL of Google CDN
        wp_enqueue_script( 'jQuery UI Core' ); // include jQueryUI

        wp_register_script('filmstrip', get_bloginfo('template_directory').'/javascript/filmstrip.js');
        wp_enqueue_script('filmstrip');

        wp_register_script('smoothDivScroll', get_bloginfo('template_directory').'/SmoothDivScroll-1.1/js/jquery.smoothDivScroll-1.1-min.js');
        wp_enqueue_script('smoothDivScroll');

    }
}

add_action('init', 'init_my_scripts');

当然，您可以将jQuery CDN更改为Google CDN，将“模板目录”更改为“样式表目录”，等等。
发现了问题，我尝试将正常的硬编码IMG放入工作正常的，然后将它们包装在“p”标记中，产生了相同的问题。我想我只是想得太多了。很抱歉现在想知道如何让循环只产生IMG。
所有浏览器？链接到你的页面？我现在正在本地主机服务器上开发，所以它还没有联机。问题出现在所有浏览器中。如果您发布所有相关代码，则可能会有所帮助。。。到目前为止，发布的内容没有多少故障排除功能。好的，我在编辑中添加了一系列信息，如果还有其他需要的，请告诉我。谢谢。我找到了问题的答案，但仅供将来参考。这段代码到底做了什么？我应该总是在函数文件中注册jQuery插件吗？这是最好的做法。您可能需要检查wp_enqueue_脚本函数的参考资料部分中列出的链接。也修复了这个问题，它只需要在模板顶部添加一个。谢谢大家。