显示多个内容项目从一个动态列表(Wordpress WP-Query)与Javascript幻灯片效果

Display multiple content items from a dynamic list (Wordpress WP-Query) with Javascript Slide Effect

本文关键字：WP-Query Wordpress Javascript 幻灯片 列表 动态 项目 一个 显示      更新时间：2023-09-26

我使用以下代码生成一个带有javascript滑动效果的动态列表:

<head>
<script data-require="jquery@*" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<div class="newsblock">
<ul id="newgall">
<?php
//display 10 posts with title and date
$args=array(
  'post_type' => 'post',
  'post_status' => 'publish',
  'post_category' => '123',
  'posts_per_page' => 12,
  'caller_get_posts'=> 1
);
$my_query = null;
$my_query = new WP_Query($args);
if( $my_query->have_posts() ) {
  while ($my_query->have_posts()) : $my_query->the_post(); 
?>
    <li>
    <p>
    <a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a> 
    <br/><?php the_time('F jS, g:i a') ?>
    <br/>
    </p>
    </li>
    <?php
  endwhile;
}
wp_reset_query();  // Restore global post data stomped by the_post().
?>
  </ul>
</div>          
<script>
        var $items = $('#newgall li'),
            i = 0;
        function slide() {
            var index = i % $items.length;
            $items.hide().removeClass('curr').slice(index, index +4).show('fade').addClass('curr');
            i += 4;
            setTimeout(slide, 400);
        };
        slide();
</script>
    </body>

现在，我想使用幻灯片效果在12个帖子中一次显示4个最近的帖子，总共进行3次转换。对于一个正常的、无序的列表，这很有效。当我使用WP_Query作为列表时，该列表将不会填充多个转换。

12个帖子中只有4个显示出了什么问题?

还有，我怎么能默认为第一组4个List项呢?在填充列表之前会发生过渡效果，导致出现空白，然后显示内容。我想从最近的4篇文章开始，然后过渡到下一组内容，等等。

代码正常运行!还有其他一些无用的冲突代码导致了错误。谢谢,我 !

相关文章：