0

我创建了一个 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>
4

1 回答 1

0

所以我实际上设法在有人回答之前弄清楚了。非常简单的修复，只需添加

resizeContainer: false,
slideResize: false

到循环选项，就像这样，

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

    });
});
于 2013-06-26T23:51:03.573 回答