Question

我正在开发一个拥有使用jQuery循环的自定义Slider的网站。出于某种原因，它只增加了寻呼机链接的数量，同时只循环原始页面。因此，使用两张幻灯片，它会生成这样的标记，只有前两个链接处于活动状态：

<div id="pager">
  <a href="#" class="activeSlide">1</a>
  <a href="#" class>2</a>
  <a href="#">1</a>
  <a href="#">2</a>
</div>

在Wordpress中用于构建此代码的代码如下：

<script type="text/javascript" src="http://malsup.github.com/jquery.cycle.all.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $('input[title!=""]').hint();
        $('.slideshow-wrap').cycle({ pager: '#pager' });
    });     
</script>

<div class="home-slider">
    <div class="slideshow-arch">
        <div class="slideshow-wrap">
        <?php
        global $post;
        $tmp_post = $post;
        $args = array( 'post_type' => 'slideshow', 'orderby' => 'post_date', 'order' => 'ASC' );
        $blog2 = get_posts( $args );
        ?>
        <?php foreach($blog2 as $post) : setup_postdata($post);  ?>
            <article <?php post_class('post'); ?>>
                <div class="slideshow-content">
                    <?php $subtitle = get_post_meta($post->ID, 'wpcf-slideshow-subtitle', true); $linkThis = get_post_meta($post->ID, 'wpcf-slideshow-link', true); ?>
                    <h2><a href="<?php print $linkThis; ?>"><?php print the_title(); ?></a></h2>
                    <h3><?php print $subtitle; ?></h3>
                    <?php the_excerpt(); ?>
                    <p style="text-align: right;"><a href="<?php print $linkThis; ?>">Find out more &raquo;</a></p>
                </div>

                <?php if (has_post_thumbnail( $post->ID )): ?>
                <div class="slideshow-img">
                    <?php $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'full' ); ?>
                    <img src="<?php bloginfo('stylesheet_directory'); ?>/timthumb.php?src=<?php echo $image[0]; ?>&w=1100&h=360&zc=1" />
                </div>
                <?php endif; ?>
            </article>
        <?php endforeach; ?>
        <?php $post = $tmp_post; ?>
        </div>
        <div id="pager"></div>

        <img class="slider-overlay" src='/wp-content/themes/jdr/images/transparent-slideshow.png'>
    </div>

</div>

任何人都能帮助解释为什么会发生这种情况吗？

Answer 1

修正了此制作周期对文章的操作，并将幻灯片内容div移动到幻灯片显示div。

jQuery Cycle Pager生成额外的寻呼机链接

1 个答案: