图像显示为断开的Javascript
我正在测试这里找到的脚本 我没有得到任何错误，它会旋转图像，但图像只是显示为小碎块，我假设是碎块图像图标 我在使用谷歌浏览器，在MAC上运行mavericks。此外，所有文件都位于我创建的user.local（server/host）页面上，因此如果我进入浏览器中的目录结构，单击图像，图像就会显示得很好。只有当我尝试加载.html文件时，它们才显示为已损坏。我还尝试过用PHP加载图像，得到了相同的破碎图像图标 这就是我说的所有文件都是作为服务器/主机的本地计算机的意思： 有人知道为什么会发生这种情况以及如何解决吗 这是我正在使用的脚本：图像显示为断开的Javascript,javascript,html,Javascript,Html,我正在测试这里找到的脚本 我没有得到任何错误，它会旋转图像，但图像只是显示为小碎块，我假设是碎块图像图标 我在使用谷歌浏览器，在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>
var电流=0；
var旋转器_obj=零；
var images_array=新数组（）；
图像_数组[0]=“旋转器_1”；
图像_数组[1]=“旋转器_2”；
图像_数组[2]=“旋转器_3”；
var rotate_them=setInterval（函数（）{rotating（）}，4000）；
函数旋转（）{
rotator_obj=document.getElementById（images_array[current]）；
如果（当前！=0）{
var rotator_obj_pass=document.getElementById（images_数组[current-1]）；
rotator_obj_pass.style.left=“-320px”；
}
否则{
旋转器_obj.style.left=“-320px”；
}
var slideit=setInterval（函数（）{change_position（rotator_obj）}，30）；
电流++；
if（当前==images\u array.length+1）{
var rotator_obj_passed=document.getElementById（images_数组[current-2]）；
rotator_obj_passed.style.left=“-320px”；
电流=0；
旋转（）；
}
}
功能改变位置（旋转器对象，类型）{
var intleft=parseInt（rotator_obj.style.left）；
如果（intleft！=0）{
旋转器_obj.style.left=intleft+32+“px”；
}
else if（intleft==0）{
清除间隔（slideit）；
}
}
#外旋{
位置：绝对位置；
最高：50%；
左：50%；
宽度：320px；
高度：240px；
利润上限：-120px；
左边距：-160px；
溢出：隐藏；
}
#旋转外部img{
位置：绝对位置；
顶部：0px；
左：0px；
}
如果您在某个框架上工作，那么一定会有一个基本url变量，您可以使用它来代替手动写入url，这听起来像是图像的src属性中的错误url。右键单击断开的图像图标并检查它（如果不是所有浏览器都支持的话，那么大多数浏览器都支持），然后查看url指向何处 要修复url，请尝试以下操作之一： 尝试在图像链接前添加一个/ 尝试在包含http的图像上包含完整路径，也可以尝试排除http并改为写入//yourwebsite.com/images/foo.jpg，看看这是否解决了问题
如果您在某个框架上工作，那么一定会有一个基本url变量，您可以使用它来代替手动写入url右键单击并检查图像。他们指向正确的url吗？在你的浏览器上试试这个url（它是src=”“属性），这个小方块确实在告诉你“在你说的地方没有图像”。只需检查您的URL，确保它指向正确的位置，并且所有内容都拼写正确。请注意，
images/owl.pngimages/images/owl.pngDocumentRootimages/owl.pngimages/images/owl.pngDocumentRoothttp://user.local/...