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 に答える