Question

我正在尝试修改Jonathan Raasch发布的Simple jQuery Slideshow。

它会循环显示从每个图像到下一个图像的所有图像。

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%;
}

Becasue我不再明确地设置DIV“幻灯片”的高度，它会折叠为0.然后图像会覆盖我的文本。比较...

50% wide image in a zero height DIV container (overlaps text) http://img253.imageshack.us/img253/6016/variable.jpg

这是我的整个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高度与其内容的高度相匹配？

Answer 1

通过将图像的位置设置为绝对值，您可以将其从文档流中移除（文本的其余部分）并将其放在顶部。

<强>被修改：

我将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;
        }

也许这更像你想要的。你需要提出一个与你的大部分内容相匹配的理智高度，但是当它们到达周期结束时，它们似乎以最小的“弹出”方式淡入和淡出图片。

Answer 2

绝对定位是图像在文本上的原因（因为没有任何高度给出#slideshow <div>），但是你的系统需要将图像绝对定位，以便将它们叠加在一起用于幻灯片效果。由于您仍在使用jQuery，因此可以通过编程方式将容器<div>扩展到最大图像的高度。

var maxHeight = 0;
$("#slideshow img").each(function(){
    if (maxHeight < $(this).height()) {maxHeight = $(this).height()}
});
$("#slideshow").height(maxHeight);

我确信有人可以指出一种更优雅的方式来编写脚本的maxHeight部分！

为什么我的DIV小于其内容？

2 个答案: