Javascript 制作一个每1秒更改一次图像的滑块_Javascript_Loops_Slider

Javascript 制作一个每1秒更改一次图像的滑块

javascript loops

Javascript 制作一个每1秒更改一次图像的滑块,javascript,loops,slider,Javascript,Loops,Slider,我制作了一个每1秒更改一次图像的滑块，但我不知道如何使if语句循环，图像只是停留在我尝试循环的第一张幻灯片上，而我无法使其工作。你能帮我吗：）马佩奇酒店当计数器>=2条件时，您不会更改计数器变量 const图像=[ "https://www.travelercar.com/wp-content/uploads/2016/04/4a36e314016aa914f203ea6b7d579dc6_large.jpeg", "https://lemag.nikonclub.fr/wp-conte

我制作了一个每1秒更改一次图像的滑块，但我不知道如何使if语句循环，图像只是停留在我尝试循环的第一张幻灯片上，而我无法使其工作。你能帮我吗：）


马佩奇酒店

当

计数器>=2

条件时，您不会更改

计数器

变量

const图像=[
"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计数器=0；
setInterval（函数（）{
如果（计数器>=2）{
计数器-=1；//修改计数器变量
document.getElementById（“currentImage”）.src=images[counter]；
}
else if（图像[0]）{
document.getElementById（“currentImage”）.src=images[++counter]；
};
}, 1000);

马佩奇酒店
我创建了这个代码段，因此您可以在数组中拥有任意数量的图像

const图像=[
"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"];
让计数=0；
常量displayImage=（）=>{
document.getElementById（“currentImage”）.src=images[count]；
如果（计数>=（images.length-1））计数=0；
else-count++；
}
设置间隔（显示图像，1000）
这是一个使用递归的工作示例

const图像=[
"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”）；
（功能滑块（计数器、透镜）{
sliderElement.src=图像[计数器]；
计数器++；
if（len==计数器）{
计数器=0；
}
设置超时（滑块，1000，计数器，透镜）；
})（0，图像长度）

马佩奇酒店
是否有更改计数器变量的代码，但您没有在此处显示？没有，这是我所有的代码。非常感谢您的帮助。我被困在这上面好几个小时了@戈壁乐意帮忙：）
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>