jQuery串行滾動CSS問題

我遇到了串行滾動實現的一個了不起的問題。我已經設置好每個列表項目都是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％的寬度足以將它們保留在原位。

任何想法將不勝感激，我在我的繫繩的末尾！

來源

2010-07-14 Dan

嘗試改變#slideshow使用固定寬度，相對定位和自動左右邊距，它應具有定心它（和其內容）的效果：

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

更改900px寬度如果你不打算使用那麼寬的圖像，我建議上面的內容小些。

來源

2010-07-15 14:18:34 Nick

我可以吻你！非常感謝。作爲旁註：從絕對變爲相對意味着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

jQuery串行滾動CSS問題

回答

相關問題