Question

我使用jQuery cycle创建了一个自适应图像滑块。

我使用的以下设置工作正常，除了包含.cycle div之外没有正确清除，使其后面的任何内容都位于其下方。

这是因为div是相对的，它的孩子是绝对的。

     $('.cycle').cycle({
        slideResize: true,
        containerResize: false,
        fit: 1,
        width: "fit"
     });

我的问题是，如何在没有固定高度或使用某些事件繁重的JavaScript的情况下清除响应式.cycle div？

以下是关于jsfiddle的代码：http://jsfiddle.net/blowsie/HuNfz/19/

更新

我写了一些代码来修复循环的高度，它按预期工作（尽管它有时可能会出错），但它的事件很重，而且不是很光滑。

我很乐意看到可以在纯CSS中完成，或者在循环设置中进行更改。

http://jsfiddle.net/blowsie/HuNfz/22/

Answer 1

周期友好不敏感。但是Cycle2肯定是。请在此处查看：http://jquery.malsup.com/cycle2/

Answer 2

可能会添加调整大小的窗口：

$(window).resize(function () {
    $('.cycle').height($('img:visible').height());
});
setTimeout(300, $(window).resize());

http://jsfiddle.net/HuNfz/60/

Answer 3

老帖子，我知道。

我们让它在生产环境中工作。 Cycle2不是，现在仍然不是我们的选择。不幸的是，它涉及修改周期的内部数据。幸运的是，修复很简单。

当循环插件初始化时，它会为每个幻灯片添加两个 cycleW 和 cycleH 的属性＆＃39; DOM对象分别具有每个幻灯片的初始宽度和高度。无论窗口的尺寸如何，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>

现在窗口调整大小功能。这是我们的版本。您可能需要自定义此选项以满足您的需求。基本上，我们存储幻灯片中固定图像的情况的初始比率。有时我们有可变高度幻灯片。此代码解决了这两种情况。然后，它重置每个slide 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;
        });
    });
});

Answer 4

默认情况下，插件指定位置：相对于你的位置以及指定位置的位置：绝对值和z指数值。这使得幻灯片放映成堆叠中的浮动/脱落。我找到了2个问题的解决方案：

为您添加clearfix类，并将clearfix的css样式添加到样式表中。

.clearfix：after {     内容：“。”;     显示：块;     明确：两者;     能见度：隐藏;     line-height：0;     身高：0; }

.clearfix {     display：inline-block; }

html [xmlns] .clearfix {     显示：块; }
- html .clearfix { 身高：1％; }
（不是很优雅）为您的循环类添加边框

.cycle {border：1px solid＃f00; }

希望其中一项有所帮助。

清除响应式jQuery循环

4 个答案: