Question

由于几个月甚至更长时间我都在努力解决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”子句相对应。这说明当条件为真时，浏览器无法读取图像的高度值。这对我来说似乎很奇怪。但是当我在脚本运行时检查Google Chrome中的输出时，这不会得到确认。这意味着在img元素中正确地处理了高度和宽度值：'' 因此浏览器不会执行脚本告诉它的操作。 [顺便说一下，对于Firefox]

有人能给我一些线索吗？欢迎任何帮助，提前谢谢

wimsch

浏览器无法读取图像的高度值

0 个答案: