这已经让我发疯了一段时间——我想将jQuery Cycle Lite 插件与简单的液体布局结合起来。
我的问题是幻灯片下方的内容在其下方消失了——当幻灯片 JS 处于活动状态时,包含幻灯片的 div 的高度似乎为 0px。如果我删除幻灯片代码(并且只使用静止图像),则 div 被其中的图像推到正确的高度。
由于幻灯片本身会随液体布局缩放,因此我无法为幻灯片指定 px 高度。任何人都可以提出解决方法吗?
代码如下,但在http://jsbin.com/ubufi5/edit查看我一直在使用的示例可能会有所帮助。
谢谢阅读!
HTML/CSS:
<head>
<meta charset="utf-8" />
<title>Slideshow in a liquid layout</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script type="text/javascript" src="http://misc.somnambulist.org/jquery.cycle.lite.1.0.js"></script>
<style type="text/css">
body { max-width: 1120px; margin: 100px auto; border: 1px solid #ff0; background: #666;}
body img { width: 100%; }
</style>
</head>
<body id="home">
<h1>Test</h1>
<div id="slidebox">
<img src="http://misc.somnambulist.org/test2.jpg" />
<img src="http://misc.somnambulist.org/test4.jpg" />
</div>
<h2>Lots of text here so it clears the image</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</body>
</html>
JS:
$(function() {
$('#slidebox').cycle();
});