Question

我正在测试这里找到的脚本

Show images one after one after some interval of time

我没有得到任何错误，它会旋转图像，但图像只是显示为小方块，我假设它是破碎的图像图标。

我使用谷歌浏览器，在MAC上运行小牛。此外，所有文件都在我创建的user.local（服务器/主机）页面上，所以如果我进入浏览器的目录结构，我点击图像就可以了。只有当我尝试加载.html文件时，它们才会出现故障。我也尝试用PHP加载图像，我得到了相同的破碎图像图标。

当我说所有文件都是我的本地计算机作为服务器/主机时，这就是我的意思：

任何人都知道为什么会发生这种情况以及如何解决这个问题？

这是我正在使用的脚本：

var current = 0;
var rotator_obj = null;

var images_array = new Array();
images_array[0] = "rotator_1";
images_array[1] = "rotator_2";
images_array[2] = "rotator_3";

var rotate_them = setInterval(function(){rotating()},4000);

function rotating(){

    rotator_obj = document.getElementById(images_array[current]);

    if(current != 0) {

        var rotator_obj_pass = document.getElementById(images_array[current-1]);
        rotator_obj_pass.style.left = "-320px";

    }
    else {

        rotator_obj.style.left = "-320px";

    }

    var slideit = setInterval(function(){change_position(rotator_obj)},30);

    current++;

    if (current == images_array.length+1) {

        var rotator_obj_passed = document.getElementById(images_array[current-2]);
        rotator_obj_passed.style.left = "-320px";
        current = 0;
        rotating();

    }

}

function change_position(rotator_obj, type) {

    var intleft = parseInt(rotator_obj.style.left);

    if (intleft != 0) {

        rotator_obj.style.left = intleft + 32 + "px";

    }
    else if (intleft == 0) {

        clearInterval(slideit);

    }

}


</script>

<style>

#rotate_outer {

    position: absolute;
    top: 50%;
    left: 50%;
    width: 320px;
    height: 240px;
    margin-top: -120px;
    margin-left: -160px;
    overflow: hidden;

}

#rotate_outer img {

    position: absolute;
    top: 0px;
    left: 0px;

}

</style>

<html>
<head>
</head>
<body onload="rotating();">

<div id="rotate_outer">
    <img src="images/owl.png" id="rotator_1"  style="left: -320px;" />
    <img src="images/bee.png" id="rotator_2"  style="left: -320px;" />
    <img src="images/owl.png" id="rotator_3"  style="left: -320px;" />
</div>
</body>
</html>

Answer 1

这听起来像是图像的src属性中的错误网址。右键单击损坏的图像图标并检查它（大多数，如果不是所有浏览器都支持这一点）并查看网址的引导位置。

修复网址，尝试执行以下操作之一：

尝试在图片链接前添加/

尝试在图片中包含完整路径，包括http，您也可以尝试排除http并编写//yourwebsite.com/images/foo.jpg，然后查看是否可以解决问题。

如果你在某个框架上工作，那么你必须使用一个基本的url变量，而不是手动编写url

图像显示为损坏的Javascript

1 个答案: