jQuery的自动适应窗口宽度调整大小

如果我调整窗口大小，然后刷新滑块和内部的图像将调整大小，以匹配浏览器的宽度，但是我需要这种情况自动发生在窗口调整大小....如何这样做？jQuery的自动适应窗口宽度调整大小

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>

来源

2012-07-13 Chris Carruthers

这是我怎么做到的......

$(document).ready(function() { 


$('#slideshow').cycle({ 

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

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

}); 

});

希望这可以帮助任何想要解决这个问题的人（我还没有完全测试过它，当我放入寻呼机按钮时它似乎起到了作用，同样当使用像scrollHorz这样的fx时，它似乎弄乱了它高达..）

来源

2012-07-13 09:58:11

实际上，对于这个传呼机为什么玩这个游戏，有什么想法吗？上一个应该回退，下一个应该向前滑动，但他们都前进？可能是一个愚蠢的语法错误或我猜测的东西？（仍然惊讶的调整大小似乎工作，似乎有大量非常复杂的解决方案..） – 2012-07-13 10:04:54

这样做的工作，但我遇到了一个问题，因为我正在处理的一个页面没有其他内容比生成jQuery循环。所以图像下的文字最终成为了页脚。所以我通过将最小高度设置为包含元素来解决此问题。 – JGallardo 2013-06-07 18:33:59

这确定了我调整大小的概率，谢谢！ – 2014-06-15 10:36:35

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

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

    }); 

}

检查是否有帮助

来源

2012-07-13 09:28:42

感谢大家好，但我需要的在onResize funtion内投入获得此行为正常吗？ – 2012-07-13 09:39:05

检查编辑过的帖子 – 2012-07-13 09:41:39

你可能想要限制这个（使用settimeout等进行DIY或者使用例如不喜欢的_.throttle） – 2012-07-13 09:45:01

其实（在docs说），你所要做的唯一事情就是指定fit选项：

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

请注意，您可能需要使用width和height选项，以及 - 对我来说这没有必要。
只有当fit: 1设置为时，他们才能工作并指定幻灯片放映应设置的宽度和高度。

来源

2013-12-05 03:35:43

您可以将此代码添加到您的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>

来源

2015-05-20 05:22:03

jQuery的自动适应窗口宽度调整大小

回答

相关问题