jQuery串行滚动CSS问题

我在实现serialscroll时遇到了一个非常严重的问题。我将其设置为每个列表项都是100%宽度，以获得全屏幻灯片

您可以在此处查看完整代码：

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>

不过，如果在第二帧或第三帧上调整窗口大小，则包含图像的列表项的调整速度似乎与浏览器窗口不同，而不是保持居中。我使用了一点jquery来垂直对齐图像，但我认为文本align:center和100%width足以使它们保持原位

任何想法都将不胜感激，我已经筋疲力尽了

尝试更改#幻灯片放映，以使用固定宽度、相对定位和自动左右边距，其效果应为居中（及其内容）：

---

如果你不打算使用那么宽的图像，请将我上面建议的900px宽度改为更小的宽度。

我可以吻你！非常感谢你。作为旁注：从绝对到相对的变化意味着100%的高度不再有效，这扼杀了我的垂直对齐。我添加了一行jquery，将#content div调整为窗口高度，现在一切都很好！谢谢你，小伙子，这很有帮助。关于100%高度的观点很好——很高兴您能够用jQuery来补偿它。不确定您是否会看到这一点，但我有一个快速的后续问题。我对这个解决方案唯一的不满是，现在图像不会以全窗口宽度滑入（显然）-我在屏幕边缘有一些漂亮的png覆盖，你可以在演示中看到。我只是不明白为什么让列表项100%宽度（或者使用js将像素宽度设置为与窗口相同的大小）会如此糟糕。是没有办法做到这一点，还是我要求吃我的蛋糕？Cheers您可以使用JavaScript将#幻灯片的宽度设置为窗口宽度——只要确保每次用户调整窗口大小时都将宽度设置为新窗口宽度即可。您可以绑定窗口的调整大小事件，并使用计时器来实现这一点：我确实尝试过，但不幸的是，它的效果与宽度完全相同：100%；-我已经用新的js代码更新了演示，但我觉得这可能是一个失败的原因。再次感谢你的帮助！

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