我正在测试此处找到的脚本
Show images one after one after some interval of time
我没有收到任何错误，它会旋转图像，但图像只是显示为 splinter 的小方 block ，我假设这是 splinter 的图像图标。
我正在使用 google chrome，在 MAC 上运行 mavericks。另外，所有文件都位于我创建的 user.local(server/host) 页面上，因此，如果我进入浏览器中的目录结构，然后单击图像，图像就会正常显示。只有当我尝试加载 .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>
最佳答案
这听起来像是图像的 src 属性中的错误 url。右键单击损坏的图像图标并检查它(大多数(如果不是所有)浏览器都支持此功能)并查看 url 指向的位置。
修复网址，请尝试以下操作之一:
尝试在图片链接前面添加一个/
尝试在图像上包含完整路径(包括http)，您也可以尝试排除http并写入//yourwebsite.com/images/foo.jpg，看看是否可以解决问题。
如果您使用某个框架，必然会有一个基本 url 变量，您可以使用它来代替手动编写 url
关于javascript - 图像显示为损坏的 Javascript，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33678860/