Question

我正在尝试创建一组简单的旋转幻灯片（总共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>

Answer 1

使用内联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>

Answer 2

您的问题主要与CSS相关...您还没有为幻灯片容器或幻灯片元素设置任何CSS。如果您在页面上停用了javascript，则会看到您的rotator容器只是扩展到其所有内容的高度。这可以用css控制。

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

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

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

.rotator{
   width: 700px;
   height:300px;
   overflow:hidden;
}

首次访问页面时，旋转图像全部加载一秒钟

2 个答案: