我正在尝试修改 Simple jQuery Slideshow由 Jonathan Raasch 出版。
它循环遍历所有图像，从一个到另一个淡入淡出。
350px square image in a 350px height DIV container http://img154.imageshack.us/img154/904/fixed.jpg
他的示例适用于固定大小的图像。我希望它能够处理大小为浏览器窗口的百分比宽度的图像。
这适用于固定大小的图像...
#slideshow {
...
height:350px;
}
#slideshow img {
...
}
我是这样改的...
#slideshow {
...
}
#slideshow img {
...
width: 50%;
}
因为我不再明确设置 DIV“幻灯片放映”的高度，它会折叠为 0。然后图像会覆盖我的文本。比较...
这是我的整个 HTML 文件，包括 CSS 和 JavaScript...
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xml:lang="en">
<head>
<title></title>
<style type="text/css">
#slideshow {
position:relative;
height:350px;
}
#slideshow img {
position:absolute;
top:0;
left:0;
z-index:8;
}
#slideshow img.active {
z-index:10;
}
#slideshow img.last-active {
z-index:9;
}
</style>
<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
function slideSwitch() {
var $active = $('#slideshow img.active');
if ( $active.length == 0 ) $active = $('#slideshow img:last');
var $next = $active.next().length ? $active.next()
: $('#slideshow img:first');
$active.addClass('last-active');
$next.css({opacity: 0.0})
.addClass('active')
.animate({opacity: 1.0}, 1000, function() {
$active.removeClass('active last-active');
});
}
$(function() {
setInterval( "slideSwitch()", 5000 );
});
</script>
</head>
<body>
<div id="slideshow">
<img src="img/img1.jpg" alt="" class="active" />
<img src="img/img2.jpg" alt="" />
<img src="img/img3.jpg" alt="" />
</div>
<p>Lorem ipsum ...</p>
</body>
</html>
为什么我的 DIV 比它的内容小？如何使我的 DIV 高度与其内容的高度匹配？
最佳答案
通过将图像的位置设置为绝对位置，您可以将其从文档流中移除(其余文本所在的位置)并将其放在顶部。
已编辑:
我将 CSS 调整为:
#slideshow {
position:relative;
height:1000px;
}
#slideshow img {
position:absolute;
width: 50%;
top:0;
left:0;
z-index:8;
display: none;
}
#slideshow img.active {
z-index:10;
display: inline;
}
#slideshow img.last-active {
z-index:9;
display: inline;
}
也许这更像您想要的。您需要想出一个与大部分内容相匹配的合理高度，但这似乎会使图片在循环结束时以最少的“弹出”淡入淡出。
关于jquery - 为什么我的 DIV 比它的内容小？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/714809/