jquery循环在resize时自动适合窗口宽度

如果我调整窗口大小然后刷新滑块，其中的图像将resize以匹配浏览器宽度，但是我需要在窗口resize时自动发生….如何才能完成？

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

       $(document).ready(function() { $('.slideshow').cycle({ timeout: 400, fx: 'scrollHorz', next: '#next', prev: '#prev', }); });     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; }  
 
  
 
  
 
  
 
   

Answer 1

这就是我设法做到的方式….

 $(document).ready(function() { $('#slideshow').cycle({ slideResize: true, containerResize: true, width: '100%', height: '100%', fit: 1, fx: 'fade', next: '#next', prev: '#prev', }); }); 

希望这有助于任何想要解决这个问题的人（我还没有完全测试它，当我放入寻呼机按钮时它似乎播放，类似于使用诸如scrollHorz之类的fx似乎搞砸了它。）

Answer 2

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

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

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

Answer 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代码可以是这样的：

Answer 4

类似的post可以在这里找到JavaScript窗口resize事件

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

检查是否有帮助