我使用jQuery cycle创建了一个响应式图像滑块。
我使用的以下设置工作正常，除了包含的.cyclediv 没有正确清除，在它下面放置任何内容。
这是因为 div 是相对的，它的子元素是绝对的。
$('.cycle').cycle({
slideResize: true,
containerResize: false,
fit: 1,
width: "fit"
});
我的问题是，如何在.cycle没有固定高度或使用某些事件繁重的 JavaScript 的情况下清除响应式 div？
这是我在 jsfiddle 上的代码：http: //jsfiddle.net/blowsie/HuNfz/19/
更新：
我写了一些代码来修复循环的高度，它可以按预期工作（虽然它有时会出错），但它的事件很重而且不是很流畅。
我很乐意看到可以用纯 CSS 或更改循环设置来完成。
Cycle 的响应不是很友好。但 Cycle2 绝对是。在这里查看：http: //jquery.malsup.com/cycle2/
老帖子，我知道。
我们让它在生产中使用 cycle。Cycle2 不是，现在也不是我们的选择。不幸的是，它涉及修改循环的内部数据。幸运的是，修复很简单。
当循环插件初始化时，它会为每个幻灯片的 DOM 对象添加两个属性 cycleW和cycleH，分别是每张幻灯片的初始宽度和高度。Cycle 使用这些属性为每张幻灯片设置动画，而不管窗口的尺寸如何。
调整窗口大小时，您需要手动清除 cycleW 和 cycleH 或将它们设置为预先确定的值。
示例（假设您的幻灯片容器是 .slideshow）：
$(".slideshow").children("div").each(function(){
this.cycleW = $(this).width();
this.cycleH = $(this).height();
});
我们让它在生产中运行良好。
html 看起来像这样：
<div class="slideshow">
<div class="slide"><img src=".." width="100%" height="auto"/></div>
<div class="slide"><p>Copy copy copy no photo on slide </p></div>
<div class="slide"><img src=".." width="100%" height="auto"/></div>
<div class="slide"><p>Copy copy copy no photo on slide </p></div>
...
</div>
现在窗口调整大小功能。这是我们的版本。您可能需要对其进行自定义以满足您的需求。基本上，我们在幻灯片中存储固定图像的情况下的初始比率。有时我们有可变高度的幻灯片。此代码解决了这两种情况。然后，它重置每个幻灯片 DOM 元素的内部 cycleW 和 cycleH 值以适应它们的父容器
$(window).resize(function(){
// first time around, save original width & height for ratios and complicated preloading
$(".slideshow").each(function(i,elt){
var originalWidth = $(elt).data("originalWidth"); // check existence of our ratio cache
if (typeof originalWidth == "undefined") {
var containerWidth = $(elt).parent().first().width(); // auto scale to container width.
var containerHeight = $(elt).parent().first().height();
$(elt).data("originalWidth",containerWidth);
$(elt).data("originalHeight",containerHeight);
}
});
// fix slideshows to their container width
$(".slideshow").each(function(i,elt){
var containerWidth = $(elt).parent().first().width();
var originalWidth = $(elt).data("originalWidth")*1;
var originalHeight = $(elt).data("originalHeight")*1;
var height = Math.floor(originalHeight*containerWidth/originalWidth); // maintain original ratio
$(elt).css("width", containerWidth+"px").css("height",height+"px"); // container actual dimensions. height might get reset again below
$(elt).children("div").css("width", containerWidth+"px"); // reset each slide width
// (fails once slide moves out, because the cycle plugin will use a cached value)
$(elt).children("div").children().css("width", containerWidth+"px"); // fix direct children (images or divs - images should have height auto).
// recompute max height based on inside slide, not just photos.
// some slideshows have variable height slides.
var maxHeight = 0;
var panelArray = $(elt).children("div");
for (var i = 0; i < panelArray.length; i++) {
var height = $(panelArray[i]).height();
if (height > maxHeight) maxHeight = height;
}
if (maxHeight > 0) {
$(elt).height(maxHeight);
}
// fix internal cycle dimension cache (cycleW and cycleH on each slide)
$(elt).children("div").each(function(){
this.cycleW = containerWidth;
this.cycleH = maxHeight;
});
});
});
可能添加一个调整大小的窗口：
$(window).resize(function () {
$('.cycle').height($('img:visible').height());
});
setTimeout(300, $(window).resize());
默认情况下，插件将 position:relative 分配给 your 和 s ，它分配 position: absolute 和 z-index 值。这使得幻灯片成为一个浮动/不卡在堆栈中。我找到了2个解决方案：
将 clearfix 类添加到您的样式表中，并将 clearfix 的 css 样式添加到您的样式表中。
.clearfix:after { 内容：“。”；显示：块；明确：两者；可见性：隐藏；行高：0；高度：0；}
.clearfix { 显示：内联块；}
html[xmlns] .clearfix { 显示：块；}
（不是很优雅）为你的循环课添加边框
.cycle { 边框：1px 实心 #f00; }
希望其中之一有所帮助。