0

如果您在下面查看我的 URL，并且连接速度可能不是很快。您会注意到顶部的滑块，将每个单独的幻灯片加载到垂直列表中（占用大约 1000 像素的空间），然后再捕捉到它应该呈现的方式 - 这就像一个标准滑块；一次显示和滑动一张幻灯片。

有人对如何让我的滑块正确加载有任何建议吗？

现场直播网站 >> http://tinyurl.com/cz6sawg

--- 感谢任何指针，我想我需要找到一个脚本，允许隐藏幻灯片，直到滑块/页面在呈现之前完全加载。

相关的jQuery：

<script type="text/javascript">

jQuery(document).ready(function($){
    $("#photo-rotator").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 6000);
});

</script>

相关加价：

<!-- Top of Page Slider FRAGILE -->

<div style="min-height: 280px;">

<div id="photo-rotator" style="">
<?php $slide_id=1; ?>
<?php
 $featuredPosts = new WP_Query();
 $featuredPosts->query("showposts=3");
 while ($featuredPosts->have_posts()) : $featuredPosts->the_post();
 ?>

    <div id="slide-<?php echo $slide_id; $slide_id++;?>">
     <a href="<?php the_permalink() ?>" class="post-image">
         <?php the_post_thumbnail( 'rotator-post-image' ); ?>
         <span class="title" style="font-style:italic; color:#999;"><?php the_title(); ?></span>
     </a>
     </div>

    <?php endwhile; ?><!--/close loop-->

    <ul id="slide-nav">
        <?php $nav_id=1; ?>
        <?php while ($featuredPosts->have_posts()) : $featuredPosts->the_post(); ?>
            <li>
                <a href="#slide-<?php echo $nav_id; ?>">
                    <span class="thumbnail" style="display:none;">
                    </span>
                    <p style="color:#F93; font-family:Georgia, 'Times New Roman', Times, serif; font-size: 18px;"><? the_title(); $nav_id++;?></p>

                    <div style="">

                    <!--<?php the_excerpt(); ?>-->

                    <?php if($text= get_post_meta($post->ID, "slidetext", true)) { ?>
                         <div class="">

                         <p style="font-weight: normal; color: #333; font-family: Arial, Helvetica, sans-serif; font-size: 14px;"><?php echo $text; ?></p> 

                         </div>
                        <?php } //else { print"<div>"; } ?>  

                    </div>   

                </a>
            </li>
        <?php endwhile; ?><!--/close loop-->
        </ul>
        </div>

</div>        

<!-- End Top page Slider FRAGILE -->
4

1 回答 1

0

您的代码有点混乱，这个问题没有帮助，但与您的问题部分有关：

您会注意到顶部的滑块，将每个单独的幻灯片加载到垂直列表中（占用大约 1000 像素的空间），然后再捕捉到它应该呈现的方式

您可以用 div包装整个滑块内容并给出overflow:hidden;以防止页面加载时 +/-1000px 的高度：

CSS

#photo-rotatorWrapper {
    width: 960px;
    height: 400px;
    margin: 0 auto;
    overflow: hidden;
}

HTML

<div id="photo-rotatorWrapper">
  <div id="photo-rotator">
    ...
  </div>
</div>

注意： 您可能需要CSS为该包装器设置其他声明，以便在当前 HTML 结构中保持正确定位。

于 2012-05-15T19:53:46.243 回答