Щелкнуть через изображения Var в цикле

Question

В настоящее время я изучаю основы c JavaScript / JQuery, но мне нужно быстрое решение проблемы, которая немного выше того, что я могу решить прямо сейчас.

Я пытаюсь создать функцию, которая позволяет мне щелкать по изображениям, и когда я щелкаю по последнему изображению, он возвращается к первому изображению, в al oop.

(Я пытаюсь сделать что-то похожее на это: https://www.antennebooks.com/product/east-end-of-europe/)

Любая помощь будет принята с благодарностью!

это то, что я имею до сих пор:

<script>
var images = [
  "images/img1.png",
  "images/img2.png",
  "images/img3.png",
  "images/img4.png"
]

var step = 0;
changeImage(); 

function changeImage() {

  document.getElementById('imgClickAndChange').src = images[step];
  step++;
}

Answer 1

Предполагая, что функция changeImage() вызывается при нажатии на отображаемое изображение, вам просто нужно изменить step++; на step = (step + 1) % images.length; и поместить его в качестве первой строки вашей функции. Каждый раз, когда step + 1 равно images.length, шаг будет сброшен на 0.

Answer 2

Мы могли бы использовать jQuery и манипулировать DOM с помощью событий, которые имели бы больше смысла в этой ситуации. Событие «щелчка» может быть вызвано, когда пользователь нажимает на изображение. Вы можете сохранить изображения в наборе, а когда количество кликов превышает длину набора, отобразите первую карточку и начните процесс заново. Вот пример кода JavaScript с использованием библиотеки jQuery:

$(document).ready(function (){
    var card = $('.card'); //store each card with an image in it in a set
    card.css('cursor', 'pointer'); //set the cursor to pointer to make a click obvious to user
    card.not(':first').hide(); //hide all but the first image (card)
    count = 1; //set the initial click count to one

    card.on('click', function() { //listen for an image to be clicked
        $(this).hide(); //hide the image that has been clicked
        $(this).next().show(); //show the next image
        count++; //increment the count
        if(count > card.length) { //if the count is greater than the length of the set, you are out of images (cards)
            count = 1; //reset the count
            card.first().show(); //show the first card and start process over
        }
    });
});

Это код html, который я использую для имитации событий, которые вы ищете:

<div class="card" style="max-width: 18rem;">
    <img class="card-img-top" src="/path">
    <div class="card-body">
      <p>This is a random card and stuff</p>
    </div>
 </div>
 <div class="card" style="max-width: 18rem;">
    <img class="card-img-top" src="/path">
    <div class="card-body">
      <p>This is a random card and stuff</p>
    </div>
  </div>
  <div class="card" style="max-width: 18rem;">
    <img class="card-img-top" src="/path">
    <div class="card-body">
      <p>This is a random card and stuff</p>
    </div>
  </div>

Как видите, у нас есть три карты, которые в основном хранят наши изображения. Если вам просто нужны изображения, а не карты, то делайте это, потому что эта часть тривиальна. Здесь важна логика программирования c. Я просто установил бы счетчик, и как только этот счетчик превысил бы длину набора (коллекции) карт (набор / коллекция является объектом массива), затем снова показал бы первую карту и начал процесс заново, как я показал вам. в JavaScript.