我制作了一个滑块，每1秒更改一次图像，但我不知道如何使if语句循环，图像只是停留在我尝试循环while和for的第一张幻灯片上，但我无法使其工作。你能帮我吗？(
const images = [
"https://www.travelercar.com/wp-content/uploads/2016/04/4a36e314016aa914f203ea6b7d579dc6_large.jpeg",
"https://lemag.nikonclub.fr/wp-content/uploads/2017/07/08.jpg",
"https://www.yourvalleynews.co.uk/wp-content/uploads/2018/03/pic-outside-1080x675.jpg",
];
var counter = 0;
setInterval (function() {
if (counter >= 2 ){
document.getElementById("currentImage").src = images[counter-2];
}
else if (images[0]){
document.getElementById("currentImage").src = images[++counter];
};
}, 1000);
<head>
<meta charset="utf-8">
<title>Intitulé de ma page</title>
<link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300|Sonsie+One" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="style.css">
<style>
</style>
</head>
<body>
<div style="width: 60%; margin: auto;">
<div id="exemple1" name="slide" style="display: flex;">
<!-- image container -->
<img src="https://www.travelercar.com/wp-content/uploads/2016/04/4a36e314016aa914f203ea6b7d579dc6_large.jpeg" id="currentImage" height="300" />
</div>
</div>
<script src="script.js"></script>
</body>
当满足counter>=2条件时，不更改counter变量。
const images = [
"https://www.travelercar.com/wp-content/uploads/2016/04/4a36e314016aa914f203ea6b7d579dc6_large.jpeg",
"https://lemag.nikonclub.fr/wp-content/uploads/2017/07/08.jpg",
"https://www.yourvalleynews.co.uk/wp-content/uploads/2018/03/pic-outside-1080x675.jpg",
];
var counter = 0;
setInterval (function() {
if (counter >= 2 ){
counter -= 1; // modify the counter variable
document.getElementById("currentImage").src = images[counter];
}
else if (images[0]){
document.getElementById("currentImage").src = images[++counter];
};
}, 1000);<head>
<meta charset="utf-8">
<title>Intitulé de ma page</title>
<link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300|Sonsie+One" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="style.css">
<style>
</style>
</head>
<body>
<div style="width: 60%; margin: auto;">
<div id="exemple1" name="slide" style="display: flex;">
<!-- image container -->
<img src="https://www.travelercar.com/wp-content/uploads/2016/04/4a36e314016aa914f203ea6b7d579dc6_large.jpeg" id="currentImage" height="300" />
</div>
</div>
</body>我创建了这个片段，这样您就可以在数组中拥有任意数量的图像。
const images = [
"https://www.travelercar.com/wp-content/uploads/2016/04/4a36e314016aa914f203ea6b7d579dc6_large.jpeg",
"https://lemag.nikonclub.fr/wp-content/uploads/2017/07/08.jpg",
"https://www.yourvalleynews.co.uk/wp-content/uploads/2018/03/pic-outside-1080x675.jpg"];
let count = 0;
const displayImage = () => {
document.getElementById("currentImage").src = images[count];
if( count >= (images.length-1)) count = 0;
else count++;
}
setInterval( displayImage, 1000 );<img src="" id="currentImage" />这是一个使用递归的工作示例。
const images = [
"https://www.travelercar.com/wp-content/uploads/2016/04/4a36e314016aa914f203ea6b7d579dc6_large.jpeg",
"https://lemag.nikonclub.fr/wp-content/uploads/2017/07/08.jpg",
"https://www.yourvalleynews.co.uk/wp-content/uploads/2018/03/pic-outside-1080x675.jpg",
];
var sliderElement = document.getElementById("currentImage");
(function slider(counter, len){
sliderElement.src = images[counter];
counter ++;
if(len === counter){
counter = 0;
}
setTimeout(slider, 1000, counter, len);
})(0, images.length);<head>
<meta charset="utf-8">
<title>Intitulé de ma page</title>
<link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300|Sonsie+One" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="style.css">
<style>
</style>
</head>
<body>
<div style="width: 60%; margin: auto;">
<div id="exemple1" name="slide" style="display: flex;">
<!-- image container -->
<img src="https://www.travelercar.com/wp-content/uploads/2016/04/4a36e314016aa914f203ea6b7d579dc6_large.jpeg" id="currentImage" height="300" />
</div>
</div>
</body>