Javascript 如何在单击时循环浏览一系列图像

我有一个页面，它是一个包含img元素网格的div。我希望每一张图片，点击后，以三张一组的方式循环到下一张图片。这将在每次单击时重复，直到单击第三个图像并循环回第一个图像

我曾考虑过用javascript编写，但我正在努力编写一种方法，可以在不引用特定文件名的情况下做到这一点；如果我只有一个图像，我想与另外两个图像循环，这将非常容易，因为我可以有一个条件函数，根据当前图像调用下一个图像。但是我不能每次都把100多张图片写出来。我现在有一个很长的img元素列表和一些定义div的CSS，我不知道下一步该怎么做

我最渴望的是有人建议最好的语言来做这件事，让我大致了解脚本将要做什么，以及它将如何与img元素交互；我不希望你为我写

CSS:

HTML:

这里是我遇到麻烦的地方：我需要先加载三个图像image1_，然后加载image1_，最后加载image1_；首先是图像2_等。。。

---

但在单击之前，在网格中每个点只能显示一个。最好的语言应该是javascript，我想JQuery会提供一些帮助。 你能做的就是用不透明度作弊，使其淡入： 这只是一个示例，此代码不起作用

in html:
img1 opacity = 1;
img2 opacity = 0;
img3 opacity = 0;
in js:
onClick {
  if (img1opacity = 1){
    img1opacity = 0;
    img2opacity = 1;
  }
}

等等。。 对于一个滑块，你可以观察其他滑块是如何制作的，这并不难，你可以把所有的图像并排放置，然后改变元素的左边或边距。

---

一个很酷的方法是把你的图片放在同一边：1 2 3 1，这样当你在最后一个位置时，你可以很容易地向左转：0；或差额：0；要转到第一个而不在另一侧旋转。

需要查看您的努力！用javascript编写函数，在看不到html结构的情况下，任何人都不可能完全回答这个问题。简单地使用javascript图像滑块，您需要javascript，但使用jquery会更容易。此外，不需要存储图像名称，只需将DOM元素作为目标。。。e、 g.需要当前的，需要下一个，你需要图像的总长度，等等。你是说像图像滑块之类的东西吗？。我不明白你说的三人一组骑车是什么意思

     <div class="grid">
         <img src="image1_first.jpg"></img> ...
     </div>

in html:
img1 opacity = 1;
img2 opacity = 0;
img3 opacity = 0;
in js:
onClick {
  if (img1opacity = 1){
    img1opacity = 0;
    img2opacity = 1;
  }
}