Question

我无法在我的滑块（Jcarousel）中正确运行Jquery Cycle插件。

我的问题如下：一旦图像被滑动（这是一个圆形滑块），循环效果不再起作用。

有什么想法解决这个问题吗？

非常感谢您提前，

以下是滑块的代码：

<script type="text/javascript">
function mycarousel_initCallback(carousel) {
jQuery('#mycarousel-next').bind('click', function() {
    carousel.next();
    return false;
});
};
jQuery(document).ready(function() {
if($('#mycarousel ul li').size()>4){
jQuery("#mycarousel").jcarousel({
    wrap: 'circular',
    scroll: 2,
    initCallback: mycarousel_initCallback,
    buttonNextHTML: null,
    buttonPrevHTML: null
});
}
});
</script>

以下是Jquery Cycle插件的代码：

<script type="text/javascript">
$(document).ready(function(){ 
  $('.cycle').cycle({                            
        timeout: 500,
        speed:  1,
        delay:  1 
  }).cycle("pause").hover(function() {
        $(this).cycle('resume');
  },function(){
        $(this).cycle('pause');
  });
});
</script>

这是HTML：

<div id="mycarousel" class="jcarousel-skin-tango">
            <ul>
                <?php while (have_posts()) : the_post(); ?>
                <li>
                    <div class="grid_3">

                        <div class="cycle">
                            <?php
                            $args = array(
                                'post_type' => 'attachment',
                                'orderby' => 'menu_order',
                                'order' => ASC,
                                'post_status' => null,
                                'post_parent' => $post->ID,
                            );
                            $attachments = get_posts($args);
                            if ( $attachments ):
                                foreach ( $attachments as $attachment ):
                                    echo wp_get_attachment_image($attachment->ID, 'medium');
                                endforeach;
                            endif;
                        ?>
                    </div><!-- .cycle -->


                </div><!-- .grid_3 -->
            </li>
            <?php endwhile; ?>
        </ul>
        <div class="jcarousel-scroll">
            <a href="#" id="mycarousel-next"><img src="<?php bloginfo( 'template_directory' ); ?>/images/slider.png" alt="" /></a>
        </div><!-- .jcarousel-scroll -->
    </div><!-- #mycarousel -->

Answer 1

您应该使用周期版本2

示例：

http://jquery.malsup.com/cycle2/demo/carousel.php

http://jquery.malsup.com/cycle2/demo/caro-pager.php

正确混合Jquery Cycle插件和Jcarousel

1 个答案: