0

serialscrollの実装に大きな問題があります。フルスクリーンのスライドショーを実行するために、各リストアイテムの幅が100％になるように設定しました。

あなたはここで完全なコードをチェックすることができます：http：//www.reverenddan.net/so/

CSSはかなり単純です：

#slideshow {
width: 100%;
height:100%;
margin: 0;
padding: 0;
position:absolute;
overflow:hidden;
}

#slideshow ul {
width: 800%;
height:100%;
margin: 0;
padding:0;
}

#slideshow li {
width:12.5%;
height:100%;
margin: 0;
padding: 0;
float:left;
list-style: none;
}

および対応するHTML：

<div id="slideshow">
                <ul>
                    <li id="slide1"><img class="centered" src="img/beetle.png" width="344" height="380" /></li>
                    <li id="slide2"><img class="centered" src="img/beetle.png" width="344" height="380" /></li>
                    <li id="slide3"><img class="centered" src="img/beetle.png" width="344" height="380" /></li>
                </ul>
            </div>

すべてうまくいきますが、2番目または3番目のフレームでウィンドウのサイズを変更すると、画像を保持しているリストアイテムのサイズが、中央にとどまるのではなく、ブラウザウィンドウとは異なる速度で表示されます。画像を垂直方向に整列させるためにjqueryを少し使用しましたが、text-align：centerと100％の幅で、画像を所定の位置に維持するのに十分だと思いました。

どんな考えでも大歓迎です、私は私のテザーの終わりにいます！

4

1 に答える 1

1

#slideshowを変更して、固定幅、相対位置、および自動左右マージンを使用してみてください。これにより、＃slideshow（およびそのコンテンツ）が中央に配置されます。

#slideshow{
  position: relative;
  height: 100%;
  width: 900px;
  margin: 0 auto;
  padding: 0;
  overflow:hidden;
}

幅の広い画像を使用しない場合は、上記で提案した900pxの幅をもっと小さい幅に変更してください。

于 2010-07-15T14:18:34.227 に答える