在div中包含每3个div

时间:2014-11-26 10:11:01

标签: wordpress scrollbar slice jquery-cycle

这一次显示3个图像,一次向左移动3个图像这是我的问题。我希望一次显示3个图像,一次只向左移动一个。例如,4个图像一次添加它和三个显示,当移动一个图像时,也一次显示三个图像。然后移动一个,然后还显示三个图像,如http://wmh.github.io/jquery-scrollbox/示例No 5和6 ... *

注意:$ Cat_ID是类别..

<div class="cat-box-content">
                <?php if($cat_query->have_posts()): ?>
                <div id="slideshow<?php echo $Cat_ID ?>" class="group_items-box">
                <?php while ( $cat_query->have_posts() ) : $cat_query->the_post()?>
                    <div <?php tie_post_class('scroll-item'); ?>>
                        <?php if ( function_exists("has_post_thumbnail") && has_post_thumbnail() ) : ?>         
                            <div class="post-thumbnail">
                                <a href="<?php the_permalink(); ?>" title="<?php printf( esc_attr__( 'Permalink to %s', 'tie' ), the_title_attribute( 'echo=0' ) ); ?>" rel="bookmark">
                                    <?php //the_post_thumbnail( 'thumbnail' );   ?>
                                    <?php tie_thumb( 'tie-large' ); ?>
                                    <span class="overlay-icon"></span>
                                </a>
                            </div><!-- post-thumbnail /-->
                        <?php endif; ?>         
                        <h3 class="post-box-title"><a href="<?php the_permalink(); ?>" title="<?php printf( esc_attr__( 'Permalink to %s', 'tie' ), the_title_attribute( 'echo=0' ) ); ?>" rel="bookmark"><?php the_title(); ?></a></h3>
                        <p class="post-meta">
                            <?php if( tie_get_option( 'box_meta_score' ) ) tie_get_score(); ?>
                            <?php if( tie_get_option( 'box_meta_date'  ) )  tie_get_time() ?>
                        </p>
                    </div>
                <?php endwhile;?>
                <div class="clear"></div>
                </div>
                <div id="nav<?php echo $Cat_ID ?>" class="scroll-nav"></div>
                    <?php endif; ?>
            </div>

JQuery功能:

<script type="text/javascript">
        jQuery(document).ready(function() {
            var vids = jQuery("#slideshow<?php echo $Cat_ID ?> .scroll-item");
            for(var i = 0; i < vids.length; i+=3) {
              vids.slice(i, i+3).wrapAll('<div class="group_items"></div>');
            }

            jQuery(function() {
                jQuery('#slideshow<?php echo $Cat_ID ?>').cycle({
                    fx:     'scrollHorz',
                    timeout: 3000,
                    pager:  '#nav<?php echo $Cat_ID ?>',
                    slideExpr: '.group_items',
                    speed: 1000,
                    pause: true
                });
            });
      });
    </script>

0 个答案:

没有答案