Question

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

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

我有一个<div id="gallery-nav">：<span class="prev">＆amp; <span class="next">里面都有<p>文字（＆＃34;上一页＆＃34; /＆＃34;下一页＆＃34;）。

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();
  });
});

Answer 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>

jQuery - 带有上一个/下一个按钮的简单图像库

1 个答案: