Javascript 单击循环中的Var图像

我目前正在学习基本的JavaScript/JQuery，但我需要一个快速解决问题的方法，这个方法稍微超出了我现在能够解决的范围

我希望创建一个功能，允许我点击图像，当我点击最后一个图像时，它将以循环的方式返回到第一个图像

（我正在尝试做类似的事情：）

任何帮助都将不胜感激

这就是我到目前为止所做的：

<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++;
}

变量图像=[
“images/img1.png”，
“images/img2.png”，
“images/img3.png”，
“images/img4.png”
]
var阶跃=0；
changeImage（）；
函数changeImage（）{
document.getElementById（'imgClickAndChange'）.src=images[step]；
step++；
}

假设在单击显示的图像时调用了函数

changeImage（）

，则只需更改

step++到
步骤=（步骤+1）%images.length并将其作为函数的第一行。
每次
step+1
等于images.length时，step都将重置为0。
我们可以使用jQuery并通过事件操纵DOM，这在这种情况下更有意义。当用户单击图像时，可能会触发“单击”事件。您可以将图像存储在一个集合中，当单击次数大于集合的长度时，显示第一张卡并重新开始该过程。下面是一个利用jQuery库的JavaScript代码示例：

$(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>


这是一张随机的卡片之类的东西

这是一张随机的卡片之类的东西

这是一张随机的卡片之类的东西


如你所见，我们有三张基本上存储图像的卡片。如果你只想要图像而不想要卡片，那么就这样做，因为这一部分很琐碎。这里重要的是编程逻辑。我只需设置一个计数器，一旦该计数器大于卡片集（集合）的长度（集合/集合是一个数组链接对象），然后再次显示第一张卡片，并像我在JavaScript中显示的那样重新开始该过程
 请发布您的代码/您尝试过的内容，并更具体地说明您的问题。出什么事了？会发生什么？你以为会发生什么？您是否收到任何错误消息？你已经试过什么了？etc.
步骤
将生成不带路径或png的
0,1,2,3
etc。所以你不用说就改变了来源。这将是困难的。如果你真的需要帮助，那么你应该通过这个评论区来传达改变。不要遵循你的逻辑
step++%images.length
是否相同正确？很抱歉，我不理解您关于
step++%images.length
与什么相同的问题？您的逻辑在没有解释的情况下更改了公式的语法，仅此而已<代码>%
是模块化的，如余数。但是，由于某种原因，你要摆脱
++
。好吧！例如，
images
数组中有4个图像。每次单击图像时，步长都会增加。每次步长达到3时，
（步长+1）%images.length将给出0。对于任何
（步骤+1）
等于1、2和3的
（步骤+1）%4
将始终给出1、2和3。当<代码>（步骤1）<代码>等于4时，<代码>（步骤1）% 4 < /代码>将使0i理解您的逻辑，而我只考虑从OP代码改变可能是一个混乱。不是所需的
%
部件。但是关于消除
++
。我只是想知道。无论如何，我同意这个答案。