jQuery – 带有上一个/下一个按钮的简单图片库答案

【问题标题】：jQuery – simple image gallery with previous/next buttonjQuery – 带有上一个/下一个按钮的简单图片库
【发布时间】：2014-03-31 13:08:51
【问题描述】：

我找到了一个简单的 jQuery 图像“画廊”，我根据自己的需要进行了调整。

我有一个<div id="gallery">，我在其中定义了几个<img class="gallery">。

我有一个 <div id="gallery-nav"> 和：<span class="prev"> 和 <span class="next">，它们都有一个 <p>，里面有文本（“上一个”/“下一个”）。

jQuery 脚本不应只显示指定图像中的第一个（因此：“隐藏”其他图像）并在单击“上一个”/“下一个”符号时显示上一个/下一个图像。

第一个问题：也许你们中的任何人都知道这种方法的更好/更简单/更快的解决方案。

第二个问题：我也很高兴听到有关键盘和触摸屏/滑动支持的信息。

这是我的代码：

$(document).ready(function () {
  "use strict";
  $(".gallery").first().addClass("active");
  $(".gallery").hide();
  $(".active").show();

  $(".next").click(function () {
    $(".active").removeClass("active").addClass("oldActive");

    if ($(".oldActive").is(":last-child")) {
      $(".gallery").first().addClass("active");
    } else {
      $(".oldActive").next().addClass("active");
    }

    $(".oldActive").removeClass("oldActive");
    $(".gallery").fadeOut();
    $(".active").fadeIn();
  });

  $(".prev").click(function () {
    $(".active").removeClass("active").addClass("oldActive");

    if ($(".oldActive").is(":first-child")) {
      $(".gallery").last().addClass("active");
    } else {
      $(".oldActive").prev().addClass("active");
    }

    $(".oldActive").removeClass("oldActive");
    $(".gallery").fadeOut();
    $(".active").fadeIn();
  });
});

【问题讨论】：

由于您是在寻求对工作代码的建议/评论，这可能更适合Code Review Stack Exchange
谢谢，我想过这个，但因为它还没有准备好（键盘和触摸屏），我想我得在这里问一下。
另外，$(".gallery").fadeOut(); $(".active").fadeIn(); 似乎无法正常工作。它淡出，但突然出现另一个图像，没有淡入淡出效果。有任何想法吗？是否有淡入淡出的替代方法？

标签： javascript jquery

【解决方案1】：

这是我写过的最简单的图片库，你需要吗？

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
    </head>
    <body>
        <table>
            <tr id="galerie">
                <td id="1" class="1"><img src="img/1.png" /></td>
                <td id="2" class="2" style="display:none;"><img src="img/2.png" /></td>
                <td id="3" class="3" style="display:none;"><img src="img/3.png" /></td>
            </tr>

            <tr>
                <td><a href="#" onclick="browseThrough(1)">picture 1</a></td>
                <td><a href="#" onclick="browseThrough(2)">picture 2</a></td>
                <td><a href="#" onclick="browseThrough(3)">picture 3</a></td>
            </tr>
        </table>

        <script type="text/javascript">
            function browseThrough(pictureId) {
                $("#galerie td").hide();
                $("td#"+pictureId).show()

            }
        </script>
    </body>
</html>

【讨论】：

感谢这个例子，保罗！我认为我将使用这种方法运行的问题是，它不是动态的。所以我不得不为每个 td 定义一个唯一的 ID 和类，browseThrough 也需要这个值。