Question

我想用jquery的循环来循环显示图像。我还希望根据用户是放大还是缩小窗口来自动调整这些图像的大小。现在它将根据当前屏幕大小循环显示图片，但在页面加载后不会更改。有什么想法吗？

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Peter's Website</title>
<style type = "text/css">
body, html, .slideshow,.slideshow img { margin:0; padding:0; height: 100%; width:100%;}
#bgimage { position:auto; left:0; top:0; z-index:1; height:100%; width:100%; }
</style>

<script src="js/lib/jquery.min.js" type="text/javascript"></script>
<script src="js/lib/jquery.cycle.all.js" type="text/javascript"></script>

<script type="text/javascript">
$(document).ready(function() {
    $('.slideshow').cycle({
        fx: 'fade' // choose your trjquery.cycle.allansition type, ex: fade, scrollUp, shuffle, etc...
    });
});
</script>
</head>
<body>

<div id ="blackground_image" class="slideshow">
        <img src="images/1.jpg"/>
        <img src="images/2.jpg"/>
        <img src="images/3.jpg"/>
        <img src="images/4.jpg"/>
        <img src="images/5.jpg"/>
    </div>

</body>
</html>

Answer 1

我认为您需要调整大小功能：http://api.jquery.com/resize/

Answer 2

它们是背景图像，您希望它们被拉伸以适合窗口大小吗？如果是这样，你可能想看看backstretch jQuery插件：

http://srobbin.com/blog/jquery-plugins/jquery-backstretch/

下载代码时，只需查看幻灯片示例，它将向您展示如何在图像数组之间淡入淡出。

Answer 3

如果您已经对自动调整大小进行了排序，并且jQuery Cycle正在打破它，那么在选项中使用slideResize：false和containerResize：false。

使用jquery循环和自动调整背景

3 个答案: