我在实现 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>
这一切都很好,但是如果您在第二个或第三个框架上调整窗口大小,包含图像的列表项似乎以与浏览器窗口不同的速率调整大小,而不是保持居中。我使用了一些 jquery 来垂直对齐图像,但我认为 text-align: center 和 100% width 足以让它们保持原位。
如有任何想法,我将不胜感激,我已经筋疲力尽了!
最佳答案
尝试更改 #slideshow 以使用固定宽度、相对定位和自动左右边距,这应该具有居中它(及其内容)的效果:
#slideshow{
position: relative;
height: 100%;
width: 900px;
margin: 0 auto;
padding: 0;
overflow:hidden;
}
如果您不打算使用那么宽的图像,请将我上面建议的 900 像素宽度更改为更小的宽度。
关于jQuery Serialscroll CSS 问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3249186/