3

このページでは、中央に100％幅のスプラッシュ画面があり、8秒ごとにグラフィック画像を回転させます。

このスライドショーには3つのdivがあります。メインdivにはスライドショーが含まれ、内部divにはリピーターの背景画像があり、内部divにはグラデーション画像があります。

問題1.ブラウザを小さくしようとすると....Webサイトのコンテンツが自動的に調整され、左側に移動します.....ただし、スライドショーのコンテンツがありません...現在、コンテンツがありませんが、できます黒い境界線でこれを参照してください。スライドショーは真ん中に留まります。

これを解決するにはどうすればよいですか？

問題2.ブラウザの幅が狭くなり、このページをロードすると、スライドショーが中央に表示されます。ここでブラウザを最大化します。スライドショーが小さい画面でレンダリングされたため、表示されます。側面に空白が残り、ブラウザでdivのサイズが変更されません。

私はこれに頭をぶつけたので、どんな助けや提案も歓迎します。

4

2 に答える 2

9

これまでjquery.cycleを使用したことはありませんが、レンダリング時の初期ブラウザー幅に基づいて幅を調整します。ブラウザのサイズを変更しても、これらの幅も調整されていないため、最終的な問題が発生します。

CSSを見ると、これらのdivに直接100％の幅を設定しようとしているようです（jquery.cycleはそれをオーバーライドする要素に直接幅を適用しているため、これは影響しません）。直接的な解決策は、CSSのdiv要素の幅の直後に！importantを指定することです（要素がCSSを直接​​使用するように強制します）。

たとえば（最初の青いdivを取りましょう）：

.fadein {
   width: 100% !important
}

.hd_splash_container_blue {
   width: 100% !important
   poisition: relative;
}

.main_blue {
   margin-left:70px;
   margin-right:70px;
   position: relative;
}

これにより、ブラウザのサイズを変更して、コンテンツを必要に応じて中央に配置できるようになります。

各高レベル間の唯一の変更は画像であるため、CSSをより高いレベルで適用することをお勧めします（これは現在のように実行できます）。CSSの残りの部分を取り出して、高レベルで適用します。

.hd_splash_container {
   width: 100% !important
   poisition: relative;
}

.main_color {
   margin-left:70px;
   margin-right:70px;
   position: relative;
}
于 2010-07-17T21:24:58.660 に答える
5

Cycleプラグインのネイティブオプションを使用しても、実際にはまったく同じ効果が得られると思います。次のようにこれらのルールを追加してみてください。

$('#slides').cycle({ 
  resizeContainer: false,
  slideResize: false
});
于 2012-09-12T07:28:36.243 に答える