0
我遇到了串行滾動實現的一個了不起的問題。我已經設置好每個列表項目都是100%的寬度,以獲得全屏幕幻燈片放映。jQuery串行滾動CSS問題
您可以檢查出完整的代碼在這裏: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>
它的所有工作一種享受,但是如果您在第二幀或第三幀上調整窗口大小,則保存圖像的列表項似乎會以不同於瀏覽器窗口的速率進行調整,而不是保留ce ntered。我使用了一些jQuery來垂直對齊圖像,但我認爲text-align:center和100%的寬度足以將它們保留在原位。
任何想法將不勝感激,我在我的繫繩的末尾!
我可以吻你!非常感謝。 作爲旁註:從絕對變爲相對意味着100%的高度不再起作用,導致我的垂直對齊。我添加了一行jquery來調整窗口高度的#content div的大小,它現在都很精美! 再次感謝 – Dan 2010-07-15 16:11:48
很高興幫助。關於100%高度的好處 - 非常高興你可以用jQuery補償它。 – Nick 2010-07-15 17:46:24
不確定您是否會看到此內容,但我有一個快速後續問題。我唯一能解決的問題是,現在圖像在使用整個窗口寬度時不會滑動(顯然) - 我在屏幕邊緣有一些很好的png覆蓋圖,您可以在演示中看到它。 我只是不明白爲什麼使列表項100%寬度(或使用js設置像素寬度與窗口相同的大小)擰得很厲害。有沒有辦法做到這一點,或者我要求我的蛋糕和吃它?乾杯 – Dan 2010-07-20 10:21:19