清除响应式jQuery Cycle

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/

- Blowsie

---

我将containerResize属性改为true，然后它就可以工作了，但是现在它不再具有响应性了..也许这会有所帮助.. - Boyye

不行，它需要是响应式的！谢谢。 - Blowsie

不确定您是否愿意尝试另一种技术，但我喜欢并使用Wilto的动态旋转木马。 - Jeffrey Lo

@JeffreyLo 谢谢，但这还不够，我需要淡入淡出效果和其他它没有的选项。 - Blowsie

Answer 1

Cycle不太友好，反应较慢。但是Cycle2绝对是友好的。在这里查看：http://jquery.malsup.com/cycle2/

- malsup

---

对于那些想知道如何配置以实现此目的的人，请参见此处。http://jsfiddle.net/blowsie/HuNfz/49/ - Blowsie

Answer 2

旧帖，我知道。

我们已经在生产中使用循环运行了。Cycle2对我们而言不是一个选项，因为它涉及修改循环的内部数据。幸运的是，修复方法很简单。

当循环插件初始化时，它会将cycleW和cycleH两个属性添加到每个幻灯片的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>

现在是窗口调整函数。这是我们的版本。您可能需要根据自己的需求进行自定义。基本上，我们为幻灯片中固定图像的情况存储初始比率。有时我们会有可变高度的幻灯片。此代码解决了两种情况。然后，它将每个幻灯片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;
        });
    });
});

- Max

---

仅提供一些指针，你的代码非常昂贵且运行频率过高。你应该将一些变量存储在更高的位置，并对函数进行去抖动处理。 - Blowsie

是的，我们在生产中对其进行了去抖动处理 :) 这是我们为此演示修改的简化示例，肯定可以进行优化。但问题是关于清除用于响应性的循环插件，这篇文章解释了这一点。话虽如此，既然你提到了它，去抖动并不是实现平滑UI响应的答案。它可能会创建可怕的过渡效果，并且缩短间隔可能会失去目的。感谢您的评论和支持 :) - Max

Answer 3

可能添加调整窗口大小:

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

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

- Raul Valverde

---

不断地轮询是一个非常糟糕的想法，除此之外，这种方法与我在问题中的模拟设计类似。 - Blowsie

Answer 4

默认情况下，插件会将position:relative分配给您的<div>，并将其内部的<span>分配为position:absolute和z-index值。这使得幻灯片成为一个浮动/未固定在堆栈中的元素。我找到了两个解决方案：

1. 向您的<div>添加clearfix类，并在样式表中添加clearfix的css样式。

   .clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }

   .clearfix { display: inline-block; }

   html[xmlns] .clearfix { display: block; }

   • html .clearfix { height: 1%; }

2. (不太优雅) 向您的cycle类添加边框

   .cycle { border: 1px solid #f00; }

希望其中之一能帮到您。

- makbeta

---

谢谢你的回答，但是... 两种解决方案都不适用于我 - 解决方案1 = http://jsfiddle.net/blowsie/HuNfz/47/，解决方案2 = http://jsfiddle.net/blowsie/HuNfz/46/。 - Blowsie