0

我正在尝试创建一组简单的旋转幻灯片（共 5 个），其中包含指向其各自页面的链接。我发现了一个似乎可以工作的简单代码，但是当第一次加载页面时，它会在幻灯片开始之前加载所有五个图像一秒钟。有没有办法在页面首次加载时隐藏其他图像？

我的测试页面位于：http ://www.northeastern.edu/test/coe/test.html

该页面是较大 CMS 的一部分，我正在编辑的部分位于页面中心的全景 div 中。当我尝试将这部分加载到 CMS 之外时，它似乎可以正常工作，但我无法让它一起工作。

这是我添加的代码：

    <div id="panoramic">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" ></script>
      <script src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js" ></script>
      <script>
        $('.rotator').cycle({
          speed: 500,
          fx: 'fade',
          timeout: 6000
        });
      </script>

      <div class="rotator">
        <div><p><a href="link0"><img alt="" src="header00.png" /></a></p></div>
        <div><p><a href="link1"><img alt="" src="header01.png" /></a></p></div>
        <div><p><a href="link2"><img alt="" src="header02.png" /></a></p></div>
        <div><p><a href="link3"><img alt="" src="header03.png" /></a></p></div>
        <div><p><a href="link4"><img alt="" src="header04.png" /></a></p></div>
      </div>
    </div>
4

2 回答 2

0

使用内联 css 隐藏所有在开始时不可见的内容。

  <div class="rotator">
    <div><p><a href="link0"><img alt="" src="header00.png" /></a></p></div>
    <div style="display: none;"><p><a href="link1"><img alt="" src="header01.png" /></a></p></div>
    <div style="display: none;"><p><a href="link2"><img alt="" src="header02.png" /></a></p></div>
    <div style="display: none;"><p><a href="link3"><img alt="" src="header03.png" /></a></p></div>
    <div style="display: none;"><p><a href="link4"><img alt="" src="header04.png" /></a></p></div>
  </div>
于 2012-06-28T20:00:26.523 回答
0

您的问题主要与 css 相关......您根本没有为幻灯片容器或幻灯片元素设置任何 css。如果您在页面上禁用 javascript，您将看到您的rotator容器只是扩展至其所有内容的高度。这一切都可以用 css 控制。

目前，您正在等待页面就绪事件为您设置 css，这是页面加载过程的后期，而 css 会立即得到处理。

给幻灯片容器一些尺寸。然后，当您添加overflow:hidden超出元素边界的图像时，将无法看到。

放置在样式表中的示例 css 规则：

.rotator{
   width: 700px;
   height:300px;
   overflow:hidden;
}
于 2012-06-28T20:10:52.983 回答