Fatal编程技术网
  • jquery/
  • jquery循环在调整大小时自动适应窗口宽度

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

jquery

jquery循环在调整大小时自动适应窗口宽度,jquery,cycle,Jquery,Cycle,如果我调整窗口大小，然后刷新滑块，其中的图像将调整大小以匹配浏览器宽度，但是我需要在调整窗口大小时自动执行此操作。。。。如何做到这一点 http://subzerostudio.com/Clients/perkinreveller/test.html <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled

如果我调整窗口大小，然后刷新滑块，其中的图像将调整大小以匹配浏览器宽度，但是我需要在调整窗口大小时自动执行此操作。。。。如何做到这一点

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>


无标题文件
$（文档）.ready（函数（）{
$（'.slideshow'）。循环({
超时：400，
fx:‘滚动人’，
下一个：“#下一个”，
上一页：“#上一页”，
});
});
身体{
边距：0；填充：0；
身高：100%；
宽度：100%；
位置：绝对位置；
}
#幻灯片包装{
宽度：100%；
最小宽度：600px；
}
.幻灯片放映{
宽度：100%；
}
.幻灯片组，
.幻灯片放映部{
宽度：100%！重要；
最小宽度：100%；
高度：自动；
}
类似的帖子可以在这里找到

检查这是否有帮助这就是我如何做到的

$(document).ready(function() {


$('#slideshow').cycle({

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

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

});

});
希望这能帮助任何想解决这个问题的人（我还没有完全测试过它，当我按下寻呼机按钮时，它似乎会播放起来，类似地，当使用scrollHorz这样的fx时，它似乎会把它弄糟。）

实际上（如中所述），你唯一要做的就是指定
适合
选项：

$('.slideshow').cycle({
  fit: 1
});
请注意，您可能还需要使用
宽度
和
高度
选项-对我来说，这是不必要的。
只有当设置了
fit:1
并指定了幻灯片应设置的宽度和高度时，它们才能工作。

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

});
我已经完成了这个JSFIDLE，所以您可以测试上述解决方案

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

您的html代码可以如下所示：

<div class="slideshow">
    <img src="images/img1.jpg" alt="" />
    <img src="images/img2.jpg" alt="" />
    <img src="images/img3.jpg" alt="" />
</div>
您好，谢谢，但是我需要在onresize功能中添加什么才能使其正常运行？您可能想限制它（使用settimeout等DIY或使用undescore的Score节流）事实上，您知道这台寻呼机为什么会播放吗？上一个应该向后滑动，下一个应该向前滑动，但它们都在向前滑动？？可能是一个愚蠢的语法错误或者我猜是什么？？（仍然惊讶于调整大小似乎可以工作，似乎有大量非常复杂的解决方案……）这确实可以工作，但是我遇到了一个问题，因为我正在处理的一个页面除了jQuery循环生成的内容之外没有其他内容。因此，图像下的文本最终进入页脚。所以我通过设置包含元素的最小高度来解决这个问题。 
<div class="slideshow">
    <img src="images/img1.jpg" alt="" />
    <img src="images/img2.jpg" alt="" />
    <img src="images/img3.jpg" alt="" />
</div>