jQuery周期自动适应调整大小的窗口宽度 [英] jquery cycle automatically fit to window width on resize
本文介绍了jQuery周期自动适应调整大小的窗口宽度的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
如果我调整窗口的大小然后刷新滑块，并且其中的图像将调整大小以匹配浏览器的宽度，但是我需要在窗口调整大小时自动执行此操作.
If I resize the window and then refresh the slider and the images within will resize to match the browser width, however I need this to happen automatically on window resize.... how can this be done ??
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>
推荐答案
这就是我设法做到的方法....
This is how I managed to do it....
$(document).ready(function() {
$('#slideshow').cycle({
slideResize: true,
containerResize: true,
width: '100%',
height: '100%',
fit: 1,
fx: 'fade',
next: '#next',
prev: '#prev',
});
});
希望这可以帮助希望解决此问题的任何人(我尚未对其进行全面测试，并且当我放入寻呼机按钮时，它似乎可以播放，类似地，在使用诸如scrollHorz之类的fx时，它似乎也将其弄乱了..)
Hope this helps anyone looking to solve this issue (I haven't fully tested it yet, and when I put in the pager button it seems to play up, similarly when using an fx such as scrollHorz it seems to mess it up..)
这篇关于jQuery周期自动适应调整大小的窗口宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
