1

我正在尝试使用 Jquery 创建一个简单的幻灯片，但我弄乱了容器的高度属性。我需要高度为“自动”，因为我想在调整大小时保持纵横比稳定。这是我的代码示例，谢谢！

<!DOCTYPE html>
<html lang="en-US" dir="ltr"
    <head>
        <meta charset="UTF-8">
        <title>test</title>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js?ver=3.4.1"></script>
        <script type="text/javascript">
            var jq = jQuery.noConflict();
            var i = 0;
            var slides = ["#slide_2", "#slide_1"];
            var imgSrc = new Array(2);
            imgSrc[0] = "banner1.png"
            imgSrc[1] = "banner2.png"
            jq(document).ready(slideShow);

            function slideShow(){
                slides.reverse();
                jq(slides[0]).attr("src", imgSrc[i]);
                jq(slides[0]).fadeIn(1000);
                jq(slides[1]).fadeOut(1000);
                setTimeout("slideShow()", 5000);
                i = (++i >= imgSrc.length)? 0: i;
            }
        </script>
        <style type="text/css">
            .slide {
                position:absolute;
            }
        </style>
    </head>
    <body style="background:#a9a9a9;">
        <headder id="branding" role="banner" style="display:block; background:#d0d0d0; width:100%; height:auto;">
            <h1>Example</h1>
            <div id="slideshow">
                <img id="slide_1" class="slide" src="banner1.png"/>
                <img id="slide_2" class="slide"/>
            </div> <!-- #slideshow -->
        </headder>
        <div id="main">
            <p>Lorem ipsum eu usu assum liberavisse, ut munere praesent complectitur mea. Sit an option maiorum principes. Ne per probo magna idque, est veniam exerci appareat no. Sit at amet propriae intellegebat, natum iusto forensibus duo ut. Pro hinc aperiri fabulas ut, probo tractatos euripidis an vis, ignota oblique ut nec. Ad ius munere soluta deterruisset, quot veri id vim, te vel bonorum ornatus persequeris. Pro hinc aperiri fabulas ut, probo tractatos euripidis an vis, ignota oblique ut nec. Ad ius munere soluta deterruisset, quot veri id vim, te vel bonorum ornatus persequeris.</p>
        </div> <!-- #main -->
        <footer id="last" role="contentinfo" style="background:#3c3c3c;">
            <p style="color:#f9f8f0;">test site</p>
        </footer>
    </body>
</html>
4

2 回答 2

1

感谢您的回复！在我的情况下，最终起作用的是将我的所有图像包装在另一个空的 jpg（700 字节）图像上，其分辨率与我的幻灯片和 position:relative 相同。它比 javascript 更快更轻，随窗口缩放并且完全尊重文件的“流”。

注意：要创建具有自定义尺寸的空 jpg，您可以在标题中找到 0xFFC0 标记。它之后的第 3 和第 4 个字节是 y 维度，第 5 和第 6 个字节是 x。

干杯；）

于 2012-07-22T10:27:29.510 回答
0

在这里，您可以使用 div 或任何标签包装所有图像，并为该 div 应用一些固定高度。这样就不会影响图像的纵横比

于 2012-07-20T18:20:25.993 回答