如何循环浏览一系列图片 onClick答案

【问题标题】：How to cycle through a series of images onClick如何循环浏览一系列图片 onClick
【发布时间】：2015-09-30 21:47:28
【问题描述】：

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

我曾考虑用 javascript 编写此代码，但我正在努力编写一种无需引用特定文件名即可执行此操作的方法；如果我只有一个图像要与另外两个循环，这将非常容易，因为我可以有一个条件函数，它根据当前图像调用下一个图像。但是对于页面上网格中的 100 多张图像，我不能每次都写出来。我现在基本上有一长串 img 元素和一些定义 div 的 CSS，但我对下一步感到迷茫。

我非常渴望有人建议最好的语言来执行此操作，并让我大致了解脚本将做什么以及它将如何与img 元素交互；我不指望你给我写！

CSS：

        .grid {
            width: 980px;
            height: auto;
            margin-left: auto;
            margin-right: auto;
        }
        img {
            width: 200px;
            padding-left: 20px;
            padding-right: 20px;
            padding-bottom: 20px;
        }

HTML：

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

这是我遇到麻烦的地方：我需要加载三张图片（image1_first、image1_second、image1_third；image2_first 等...）
但在“网格”中每个点只显示一个，直到被点击。

【问题讨论】：

需要看看你的努力！
用javascript编写函数，不看你的html结构，几乎没有人能完全回答这个问题。
简单使用javascript图片滑块check
您需要 javascript，但使用 jquery 会更容易。此外，不需要存储图像名称，只需针对 DOM 元素...（例如，需要当前，需要下一个，并且您需要图像的总长度等）
你的意思是像图像滑块这样的东西吗？无法理解您所说的一系列 3 次骑行的意思

标签： javascript html css image

【解决方案1】：

最好的语言是 javascript，我认为在 JQuery 的帮助下。你可以做的是用不透明作弊来淡入：这只是一个示例，此代码将不起作用。

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

等.. 对于一个滑块，您可以查看其他滑块是如何制作的，这并不难，您将所有图像并排放置并更改元素的left 或margin。一个很酷的方式总是在同一侧滑入你的图像是这样的：1 2 3 1，所以当你在最后一个时，你可以轻松地制作left:0; 或 margin:0; 去第一个一个没有在另一侧旋转。

【讨论】：