Question

我已经设置了一段javascript，用作幻灯片放映，你必须向右或向左单击才能通过一系列图像。实际上，它只有3个图像和一个按钮（蓝色div）用于单向通过阵列。

我一遍又一遍地搜索这些代码并尝试将它们分开，但我无法辨别出什么有效。我已经被困在这个阶段好几个月，因此非常感谢一些帮助。

<!DOCTYPE HTML>
<html>
<head>

<style>
#clicker { width: 200px; height:200px; background: blue; }
#pic { width: 300px; height: 150px; }
</style>
</head>

<body>
<div id="clicker"></div>
<img id="pic" src="models_web.jpg" alt="Icon" />


<script type="text/javascript">

var imgs = ["models_web.jpg","reflex_2.jpg","blue_web.jpg"];
var i = 0;
var addl = document.getELementById("clicker");

function clickrotate() {

document.getElementById("pic").src = imgs[i];
i++
if (i === 2) {i = 0};

}
addl.addEventListener( "click", clickrotate, false ) ;

</script>
</body>
</html>

Answer 1

您的脚本中有拼写错误。

var addl = document.getELementById("clicker");

更改为var addl = document.getElementById("clicker");

另一件事，你的计数器增量是错误的。它会在查看第二张图片后重置，因为您在递增后会检查i === 2 。

如果您在任何现代浏览器的开发者工具中检查控制台，您将看到错误。它会在下次为您省去麻烦。

不通过img .src循环更改'click'

1 个答案: