显示错误图像的 JQuery Cycle 插件

Posted 2023-05-09

【中文标题】显示错误图像的 JQuery Cycle 插件

【英文标题】：JQuery Cycle plugin displaying the wrong images

【发布时间】：2012-04-25 07:33:09

【问题描述】：

哦，很棒的论坛，

请帮忙！！我在使用基本 JQuery Cycle 插件时遇到问题，我在其中为父/包装器 div 中的 3 个独立 div 定义了类。每个 div 里面有 3 个图像，这些图像是特定于它们各自的父级的。问题是 JQuery Cycle 插件在错误的 div 中显示图像！！如果有人可以为我提供解决方案并解释为什么会发生这种情况，那就太好了。如果它有所作为，我正在 Wordpress 中工作。这是html：

<div class="gateway_img_containers clearfix">
    <div class="left_gateway_img_holder">
        <img src="<?php bloginfo('template_url'); ?>/images/position1_img_left.jpg" />
        <img src="<?php bloginfo('template_url'); ?>/images/position2_img_left.jpg" />
        <img src="<?php bloginfo('template_url'); ?>/images/position3_img_left.jpg" />
    </div>
    <div class="middle_gateway_img_holder">
        <img src="<?php bloginfo('template_url'); ?>/images/position2_img_left.jpg" />
        <img src="<?php bloginfo('template_url'); ?>/images/position_2_img_middle.jpg" />
        <img src="<?php bloginfo('template_url'); ?>/images/position_2_img_right.jpg" />
    </div>
    <div class="right_gateway_img_holder">
        <img src="<?php bloginfo('template_url'); ?>/images/position3_img_left.jpg" />
        <img src="<?php bloginfo('template_url'); ?>/images/position_3_img_middle.jpg" />
        <img src="<?php bloginfo('template_url'); ?>/images/position_3_img_right.jpg" />
    </div>
</div>

这里是 JQuery：

<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/jquery.cycle.all.js"></script>


<script type="text/javascript">
    var $j = jQuery.noConflict();
    $j(document).ready(function()
        $j('.left_gateway_img_holder').cycle();
    );
</script>

<script type="text/javascript">
    var $j = jQuery.noConflict();
    $j(document).ready(function()
        $j('.middle_gateway_img_holder').cycle();
    );
</script>

<script type="text/javascript">
    var $j = jQuery.noConflict();
    $j(document).ready(function()
        $j('.right_gateway_img_holder').cycle();
    );
</script>

我可以通过在循环（）中指定它们来限制显示哪些图像吗？

如果您需要更多信息，请告诉我！谢谢 :)

【问题讨论】：

您确定您的路径正确吗？我看到您可能在这里缺少_ /images/position2_img_left.jpg 和这里/images/position3_img_left.jpg...

路径是正确的......只是不一致呵呵。我的错：S 感谢您的建议！

【参考方案1】：

<script type="text/javascript">
    var $j = jQuery.noConflict();
    $j(document).ready(function()
        $j('.left_gateway_img_holder').cycle();
        $j('.middle_gateway_img_holder').cycle();
        $j('.right_gateway_img_holder').cycle();
    );
</script>

你不需要编写不同的就绪函数，尝试为你所有的div添加相对位置和隐藏溢出