我想帮助使该代码执行仅三次后停止？
我有三张照片，想改三遍就停了
<!DOCTYPE html>
<html>
<head>
<title>change picture</title>
<script type = "text/javascript">
function displayNextImage() {
x = (x === images.length - 1) ? 0 : x + 1;
document.getElementById("img").src = images[x];
}
function displayPreviousImage() {
x = (x <= 0) ? images.length - 1 : x - 1;
document.getElementById("img").src = images[x];
}
function startTimer() {
setInterval(displayNextImage, 3000);
}
var images = [], x = -1;
images[0] = "image1.jpg";
images[1] = "image2.jpg";
images[2] = "image3.jpg";
</script>
</head>
<body onload = "startTimer()">
<img id="img" src="1.jpg"/>
<button type="button" onclick="displayPreviousImage()">Previous</button>
<button type="button" onclick="displayNextImage()">Next</button>
</body>
</html>
你能帮我吗？
最佳答案
使用clearInterval停止 setInteval 函数。
<!DOCTYPE html>
<html>
<head>
<title>change picture</title>
<script type = "text/javascript">
var interval = 0;
var counter = 0;
function displayNextImage() {
x = (x === images.length - 1) ? 0 : x + 1;
document.getElementById("img").src = images[x];
counter++;
console.log(counter);
if (counter == 3) {
clearInterval(interval);
}
}
function displayPreviousImage() {
x = (x <= 0) ? images.length - 1 : x - 1;
document.getElementById("img").src = images[x];
}
function startTimer() {
interval = setInterval(displayNextImage, 3000);
}
var images = [], x = -1;
images[0] = "/image/0qVbB.jpg";
images[1] = "/image/Z4D6Z.jpg";
images[2] = "/image/JbyGx.jpg";
</script>
</head>
<body onload = "startTimer()">
<img id="img" src="/image/0qVbB.jpg"/>
<button type="button" onclick="displayPreviousImage()">Previous</button>
<button type="button" onclick="displayNextImage()">Next</button>
</body>
</html>关于javascript - 如何停止更改 html 中的照片，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36111325/