Question

我对网络编程非常陌生，所以请耐心等待，因为我确信这是一个基本问题。我学习了HTML和CSS，并且昨天开始使用Javascript。我无法让此代码正常运行。

我想设计它的方式是有一系列图片1.jpg，2.jpg，3.jpg等，它会一次显示一张图片。当您单击按钮时，它将使用增量器转到下一张图片。

我首先想要尽可能少地改变这项工作，这样我就可以看到我搞砸了什么（学习和所有这些），然后我确信我可以使用我喜欢的快捷方式学习。如果可以，请帮忙。

<html>
<head>
</head>

<body>
<script>
var picount=1;
document.write("<center>");
document.write("<img src=" + picount + ".jpg>");
document.write("</center>");

function upCount()
{
picount=picount+1;
}
</script>
<br><br><center>
<input type="button" onclick="upCount()" value="Next Picture" /></center>


</body>

</html>

Answer 1

您需要更新图片上的.src属性，以便加载新图片。这是一种方法：

<script>
var picount=1;
document.write("<center>");
document.write("<img id='picture' src=" + picount + ".jpg>");
document.write("</center>");

function upCount() {
    picount=picount+1;
    document.getElementById('picture').src = picount + ".jpg";
}
</script>
<br><br><center>
<input type="button" onclick="upCount()" value="Next Picture" /></center>

而且，在这段代码中，没有理由使用document.write()来写出初始HTML。它可能也是页面中的静态HTML，如下所示：

<script>
var picount=1;

function upCount() {
    ++picount;
    document.getElementById('picture').src = picount + ".jpg";
}
</script>
<center>
<img id="picture" src="1.jpg">
</center>
<br><br><center>
<input type="button" onclick="upCount()" value="Next Picture" /></center>

Javascript：如何用增量器滚动图片？

1 个答案: