jquery循环在调整大小时自动适应窗口宽度答案

【问题标题】：jquery cycle automatically fit to window width on resizejquery循环在调整大小时自动适应窗口宽度
【发布时间】：2012-07-13 09:23:36
【问题描述】：

如果我调整窗口大小然后刷新滑块并且其中的图像将调整大小以匹配浏览器宽度，但是我需要在调整窗口大小时自动发生这种情况....如何做到这一点？？

http://subzerostudio.com/Clients/perkinreveller/test.html

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.cycle.all.latest.js"></script>
<script type="text/javascript">

$(document).ready(function() {

$('.slideshow').cycle({
    timeout: 400,
    fx: 'scrollHorz',
    next: '#next',
    prev: '#prev',

});

});

</script>

</head>

<body>




<style>
body {
margin:0; padding:0;
height:100%;
width:100%;
position:absolute;
}

#slideshow-wrapper {
width:100%;
min-width:600px;
}

.slideshow {
width:100%;
}
.slideshow div,
.slideshow div img {
width:100% !important;
min-width:100%;
height:auto;
}

</style>


<div class="slideshow">

 <div>
     <img src="images/img1.jpg" alt="" />
 </div>

 <div>
     <img src="images/img1.jpg" alt="" />
 </div>

 <div>
     <img src="images/img1.jpg" alt="" />
 </div>

</div>    


</body>
</html>

【问题讨论】：

标签： jquery cycle

【解决方案1】：

这就是我设法做到的......

$(document).ready(function() {


$('#slideshow').cycle({

slideResize: true,
containerResize: true,
width: '100%',
height: '100%',
fit: 1,

fx: 'fade',
next: '#next',
prev: '#prev',  

});

});

希望这可以帮助任何想要解决这个问题的人（我还没有完全测试它，当我输入寻呼机按钮时，它似乎在播放，同样，当使用诸如 scrollHorz 之类的 fx 时，它似乎把它搞砸了..)

【讨论】：

事实上，有人知道为什么这个寻呼机正在播放吗？ Prev 应该向后滑动，next 应该向前滑动，但它们都向前滑动？？可能是一个愚蠢的语法错误或我猜的什么？（仍然惊讶于调整大小似乎有效，似乎有大量非常复杂的解决方案..）
这确实有效，但是我遇到了一个问题，因为我正在处理的一个页面除了 jQuery 循环生成的内容之外没有其他内容。所以图片下的文字最终进入了页脚。所以我通过为包含元素设置一个最小高度来解决这个问题。

【解决方案2】：

实际上（如docs 中所述），您唯一需要做的就是指定fit 选项：

$('.slideshow').cycle({
  fit: 1
});

请注意，您可能还需要使用 width 和 height 选项 - 对我来说这不是必需的。
它们仅在设置fit: 1 时才起作用，并指定幻灯片应设置的宽度和高度。

【讨论】：

【解决方案3】：

您可以将此代码添加到您的 javascript 中

$(window).resize(function() {

    var slideDiv = $('.slideshow');

    /* ratio = (width / height) is the aspect ratio of the image. 
       You can change this according to dimensions of the image you are
       using */

    var ratio = (640/426);  // width and height of your image 

    var w = slideDiv.parent().width();
    var h = w / ratio;

    slideDiv.width(w);
    slideDiv.height(h);

    slideDiv.children().each(function() {
        $(this).width(w);  // "this" is the img element inside your slideshow
        $(this).height(h);  // "this" is the img element inside your slideshow
    });

});

我已经完成了这个 JSFiddle https://jsfiddle.net/0x24u41f/25/，所以你可以测试上面的解决方案。

不需要用标签'div'包装图像。

你的html代码可以是这样的：

<div class="slideshow">
    <img src="images/img1.jpg" alt="" />
    <img src="images/img2.jpg" alt="" />
    <img src="images/img3.jpg" alt="" />
</div>

【讨论】：

【解决方案4】：

类似的帖子可以在这里找到JavaScript window resize event

window.onresize = function(event) {
   $('.slideshow').cycle({
     timeout: 400,
     fx: 'scrollHorz',
     next: '#next',
     prev: '#prev',

   });

}

检查是否有帮助

【讨论】：

您好，谢谢，但是我需要在 onresize 函数中添加什么才能使其正常运行？
你可能想要限制它，（使用 settimeout 等 DIY 或使用 undescore 的 _.throttle 例如）