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>

现在，这仅适用于我网页上的一张图片。

但是，当我将此代码用作我的脚本的一部分，以非常不同的方面显示蚀刻、丝网印刷、绘画等图像时，事情就出错了。

关键是图像一次显示[比如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" 子句相对应。这表明当条件为真时，浏览器无法读取图像的高度值。这对我来说似乎很奇怪。但是当我在脚本运行时检查谷歌浏览器的输出时，这并没有得到证实。这意味着在 img 元素中正确处理了高度和宽度值：'' 所以浏览器没有按照脚本告诉它做的事情。[顺便说一句，Firefox 也是如此]

有人可以给我一个线索吗？欢迎任何帮助，在此先感谢

威姆斯

4

0 回答 0