0

数か月後、おそらくそれ以上、私は JavaScript コードの障害と思われるものに苦労していますが、それを突き止めることはできません。たぶん、あなたの何人かが私にヒントを与えることができます。

ネット上で簡単に見つけることができる次のコードから始めます。

<head>
    <title>Slideshow</title>

    <script type="text/javascript">
        function resizeImage()
        {
            var window_height = document.body.clientHeight
            var window_width  = document.body.clientWidth
            var image_width   = document.images[0].width
            var image_height  = document.images[0].height
            var height_ratio  = image_height / window_height
            var width_ratio   = image_width / window_width
            if (height_ratio > width_ratio)
            {
                document.images[0].style.height = "100%"
                document.images[0].style.width  = "auto"
            }
            else
            {
                document.images[0].style.width  = "100%"
                document.images[0].style.height = "auto"
            }
        }
    </script>
</head>
<body bgcolor=#000000 onresize="resizeImage()">
    <img onload="resizeImage()" margin="0" border="0" src="nweshow/picture-0011.jpg">
</body>

これで、Web ページの 1 つの画像だけで問題なく動作します。

しかし、このコードをスクリプトの一部として使用して、エッチング、シルクスクリーン、図面などの画像を非常に異なる側面で表示すると、問題が発生します。

ポイントは、画像が一度に表示されることです [5 秒など]、ユーザーの操作はまったくありません。ただし、F11 キーを押してブラウザー ウィンドウの外側に全画面画像を取得する以外は、私が好みます。スクリプト全体は次のようになります。

<head>
    <title>Slideshow</title>
    <script>
        function resizeImage()
        {
            var window_height = document.body.clientHeight;
            var window_width  = document.body.clientWidth;
            var image_width   = document.images[0].width;
            var image_height  = document.images[0].height;
            var height_ratio  = image_height / window_height;
            var width_ratio   = image_width / window_width;

            if (height_ratio > width_ratio)
            {
                document.images[0].width  = "auto";
                document.images[0].height = "100%";
            }
            else
            {
                document.images[0].width  = "100%";
                document.images[0].height = "auto";
            }
        }
    </script>
</head>

<body bgcolor=#000000 onresize="resizeImage()">

    <script>
        var curindex=0
        var rimages=new Array()

        for ( i=0;i<54;i++)
        {
            rimages[i]="nweshow/picture-00"+(i+1)+".jpg"
        }

        var preload=new Array()

        for (n=0;n<rimages.length;n++)
        {
            preload[n]=new Image()
            preload[n].src=rimages[n]
        }

        document.write('<center><img onload="resizeImage()" name="fvds" alt="atelier" margin="0" border="0" src="' + rimages[curindex] + '"></center>')

        function rotateimage()
        {
            curindex = (curindex==rimages.length - 1) ? 0 : curindex + 1; //increment or reset
            document.images.fvds.src=rimages[curindex];
        }

        setInterval("rotateimage()", 4000)
    </script>
</body>

width_ratio が height_ratio よりも大きい場合にのみ、画像のサイズが変更されます [アスペクト比を維持する]。これは、"if" ステートメントの "else" 句に対応します。これは、条件が真の場合、ブラウザが画像の高さの値を読み取ることができないことを示しています。これは私には非常に奇妙に思えます。しかし、スクリプトの実行中にGoogle chromeで出力を確認すると、これは確認されていません。img 要素内で、高さと幅の値が正しくアドレス指定されていることを意味します。[ところで、Firefox にも同じことが当てはまります]

誰かが私に手がかりを与えることができますか？どんな助けでも大歓迎です、事前に感謝します

ウィムシュ

4

0 に答える 0