JQuery Cycle插件显示错误的图像

时间:2012-04-12 21:42:37

标签: jquery wordpress jquery-plugins cycle

哦,很棒的论坛,

请帮忙!!我在基本的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>

我可以通过在循环()中指定它们来限制显示哪些图像吗?

如果您需要更多信息,请告诉我们!谢谢::)

1 个答案:

答案 0 :(得分:0)

<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>

您不需要编写difernts ready函数, 尝试为所有div添加相对位置和隐藏溢出