Zrobiłem suwak, który zmienia obrazy co 1 sekundę, ale nie wiem, jak zrobić pętlę instrukcji if, obrazy pozostają na pierwszym slajdzie, z którym próbowałem zapętlić while i for, ale nie mogę tego zrobić. Możesz mi pomóc :)

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>

0
Gobi 19 listopad 2019, 18:04
Czy jest jakiś kod zmieniający zmienną counter, której nie pokazujesz tutaj?
 – 
daddygames
19 listopad 2019, 18:08
Nie, to cały kod, który mam.
 – 
Gobi
19 listopad 2019, 18:09

3 odpowiedzi

Kiedy warunek counter>=2, nie zmieniasz zmiennej 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>
0
daddygames 19 listopad 2019, 18:14

Stworzyłem ten fragment, abyś mógł mieć tyle obrazów, ile chcesz w tablicy.

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" />
0
gugateider 19 listopad 2019, 18:18

To jest działający przykład z wykorzystaniem rekurencji.

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>
0
harry 19 listopad 2019, 18:25
Dziękuję bardzo za Twoją pomoc. Utknąłem na tym godzinami!
 – 
Gobi
19 listopad 2019, 18:23
Chętnie pomoże :)
 – 
harry
19 listopad 2019, 18:24