Question

我创建了一个jQuery幻灯片，获得了一组6个相同大小的图像，并在我的CSS代码中将它们全部设置为100％，这样它们就可以调整窗口大小（这是一个全屏幻灯片）。但是，一旦我通过点击启动幻灯片放映，调整大小似乎不再起作用。图像保持第一次调整大小后的大小，永不改变。我玩弄了不同的jQuery插件，我似乎找不到符合我需求的插件。如果可能的话，我想避免添加另一个jQuery库（它让我感觉像一个脚本小子）并使用Cycle库，jQuery vanilla，css，javascript，html等解决这个问题。

这是我目前的代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Lorena Gaxiola</title>
<style type="text/css">
body {background: #222; font-family:Georgia, "Times New Roman", Times, serif; font-size:11px; margin:50px; color:#999}
ul li{line-height:20px;}
.new{margin-top:15px}
a{color:#fff; text-decoration:none; font-style:italic;}
a:hover{text-decoration:underline}
h1{font-size:16px; text-transform:uppercase; font-weight:normal; color:#fff; letter-spacing:1px;}
h2{font-size:12px; text-transform:uppercase; font-weight:normal; color:#999; letter-spacing:1px;}
#myslides img {height:100%; width:100%;}
</style>

<script type="text/javascript" src="jquery/jquery-1.10.1.js"></script>
<script type="text/javascript" src="jquery/jquery.cycle.all.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $('#myslides').cycle({
    fx: 'fade',
    speed: 10,
    next: '#myslides',
    timeout: 0,

});
});
</script>
</head>
<body>
<center>
<div id="myslides">

<div id="img 1">
<center>
<img src="img/1.jpg"/>
</center>
</div>


<div id="img 2">
<center>
<img src="img/2.jpg"/>
</center>
</div>


<div id="img 3">
<center>
<img src="img/3.jpg"/>
</center>
</div>


<div id="img 4">
<center>
<img src="img/4.jpg"/>
</center>
</div>


<div id="img 5">
<center>
<img src="img/5.jpg"/>
</center>
</div>


<div id="img 6">
<center>
<img src="img/6.jpg"/>
</center>
</div>


</div>
</center>
</body>
</html>

Answer 1

所以我真的设法在任何人回答之前搞清楚。非常简单的修复，只需添加

resizeContainer: false,
slideResize: false

循环选项，如此，

$(document).ready(function(){
    $('#myslides').cycle({
        fx: 'fade',
        speed: 10,
        next: '#myslides',
        timeout: 0,
        resizeContainer: false,
        slideResize: false

    });
});

启动jQuery幻灯片后，调整大小是否停止工作？

1 个答案: