0

それぞれのページへのリンクを含む単純な回転する一連のスライド (合計 5 つ) を作成しようとしています。動作しているように見える単純なコードを見つけましたが、ページが初めて読み込まれると、スライド ショーが始まる前に 5 枚の画像すべてが 1 秒間読み込まれます。ページが最初に読み込まれたときに他の画像を非表示にする方法はありますか?

私のテストページはここにあります: 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をまったく設定していません。rotatorページで JavaScript を無効にすると、コンテナがすべてのコンテンツの高さまで単純に拡張されることがわかります。これはすべてcssで制御できます。

現在、css はすぐに処理されますが、ページの読み込みプロセスの後半にある css を設定するための page ready イベントを待っています。

スライド コンテナーにいくつかの寸法を指定します。次に、要素の境界を超えて画像を追加するoverflow:hiddenと、表示されなくなります。

スタイルシートに配置する CSS ルールの例:

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