-3

我正在尝试创建一个将图像裁剪和居中为 1000px 的 javascript 函数。为此，我取宽度，减去 1000，除以 2，然后乘以 -1。然后我取这个值并将其分配给 margin-left 和 margin-right。我将其设置为在页面加载时运行。出于某种原因，它没有执行我的第一行代码。看看下面。（调试警报用于调试目的）

Javascript

function crop()
{
alert("debug")
width = document.getElementById(slide).width
alert("debug")
width = -1((width - 1000)/2)
alert("debug")
document.getElementById(slide).setAttribute("style","margin-left" + width + "px")
alert("debug")
document.getElementById(slide).setAttribute("style","margin-right" + width + "px")
alert("debug")
}

这是我试图让它应用所有这些的元素。

元素

<div id="mySlides" style="width:1000px; overflow:hidden;">
<img src="img/1.jpg" onclick="slideshow()" id="slide" />
</div>

如您所见，它只显示第一个调试警报，之后不显示任何其他内容。有人可以解释为什么它忽略了其余的代码吗？

4

2 回答 2

2

slide是对名为 的变量的引用slide。你可能想要"slide"（一个字符串），因为你的img元素有id="slide".

您应该花一些时间熟悉浏览器的调试工具（alert()这是一种可怕的调试方式）。它会指出...

ReferenceError：幻灯片未定义

于 2013-06-27T22:28:44.033 回答
0

您在此处缺少字符串周围的分隔符：

width = document.getElementById("slide").width;

您在这里缺少乘法运算符：

width = -1 * ((width - 1000)/2);

您在样式声明中缺少字符串分隔符和冒号，并且您必须将样式放在一起，否则第二个样式将覆盖第一个样式：

document.getElementById("slide").setAttribute("style","margin-left:" + width + "px;margin-right:" + width + "px");
于 2013-06-27T22:52:01.510 回答