Question

我有一个页面，它是一个包含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等...）
但只能在＆＃34; grid＆＃34;直到点击。

Answer 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;或{{1}转到第一个而不在其他地方旋转。

如何循环浏览一系列图片on

1 个答案: