Question

我正在使用jQuery Cycle来制作一些幻灯片，其中包含以下内容。 jQuery Cycle将父级设置为relative，子级滑动为绝对，因此应覆盖其下方的内容。通常，我会给父容器一个高度来解决我的问题。

由于布局是响应式的，因此高度可以改变。那里有一个简单的解决方案吗？

编辑：

以下是为我做的事情：

$(window).load(function(){

    var rotate_height = $('#rotate div img').height();
    $('#rotate').css('height', rotate_height);

    $(window).resize(function() {
        if($(window).width() >= 960){
            rotate_height = 290;
            $('#rotate').css('height', rotate_height);
            $('#rotate').cycle('next');
        } else if ($(window).width() >= 768 && $(window).width() <= 959) {
            rotate_height = 230;
            $('#rotate').css('height', rotate_height);
            $('#rotate').cycle('next');
        } else if ($(window).width() >= 480 && $(window).width() <= 767) {
            rotate_height = 210;
            $('#rotate').css('height', rotate_height);
            $('#rotate').cycle('next');
        } else if ($(window).width() <= 479) {
            rotate_height = 150;
            $('#rotate').css('height', rotate_height);
            $('#rotate').cycle('next');
        }
    });

    $('#rotate').cycle({
        fx: 'fade',
        fit: 1,
        containerResize: 0,
        slideResize: 0,
        height: rotate_height       
    });
});

在访问者调整其监视器大小后，

cycle（'next'）将幻灯片强制移动到下一个幻灯片。不理想，但只有在幻灯片更换后，图像才会缩小比例。

Answer 1

这是我的解决方案：

$(window).resize(function(){
    $('.cycle-container').each(function(){      
        $(this).height($(this).find('> *:first').outerHeight());
    })
});

Answer 2

您可以使用ready和resize个事件来触发一个功能，该功能会根据window的{{3}}正确设置height。当页面“响应”当前窗口宽度时，您的jQuery方法将适当调整幻灯片显示父级的高度。

Answer 3

我遇到了同样的问题，解决了这个问题：

HTML：

<div class="hp_slider">
<a href="#"><img class="slide" alt="" width="940" height="420" src="/assets/images/cache/17dd0cc96316523cbba09777c8e512769078b0bc.png" /></a>
<a href="#"><img class="slide" alt="" width="940" height="420" src="/assets/images/cache/39fbcef502bd01b7f13980a81b73f6e6cb5491b6.jpg" /></a>
</div>

CSS：

.hp_slider {margin-bottom:49%; width:100%; height:auto;}
.hp_slider img {width:100%; height:auto;}

jQuery的：

$(document).ready(function() {
$('.hp_slider').cycle({
fx: 'fade',
containerResize: false,
slideResize: false,
fit: 1
});
});

它有点脏，但是百分比底部以百分比的形式从滑块后面向下推动文本并将其保持在不同大小的位置，因此它仍然具有响应性。

Answer 4

我认为你可以这样做：

$slideshow.cycle({ 
  containerResize: false,
  slideResize: false,
  fit: 1
});

基本上，当窗口调整大小时，幻灯片容器被强制调整大小。（不确定是否应将所有设置为true或false，请尝试一下。）

在响应滑块中设置高度（jQuery循环）

4 个答案: