jQuery –具有上一个/下一个按钮的简单图像库

Question

I found a simple jQuery image “gallery” which I adapted to my needs. 我发现了一个简单的jQuery图像“图库”，可以适应我的需求。

I've got a <div id="gallery"> in which I define several <img class="gallery"> 's. 我有一个<div id="gallery"> ，其中定义了几个<img class="gallery"> 。

And I've got a <div id="gallery-nav"> with: <span class="prev"> & <span class="next"> which both have a <p> with text ("Previous"/"Next") inside. 而且我有一个<div id="gallery-nav">其中： <span class="prev"> ＆ <span class="next">都带有带有文本的<p> （“ Previous” /“下一步”）。

The jQuery script should not do more than show the first of the specified images (so: “hide” the others) and on click of the “Previous”/“Next” symbol show the previous/next image. jQuery脚本不应只显示指定图像中的第一个（因此：“隐藏”其他图像），并且单击“上一个” /“下一个”符号即可显示上一个/下一个图像。

First question: Maybe anyone of you knows a lot better/easier/faster solution to this approach. 第一个问题：也许你们谁都知道这种方法更好/更容易/更快的解决方案。

Second question: Also I'd be happy to hear something about keyboard- and touchscreen-/swipe-support. 第二个问题：我也很高兴听到有关键盘和触摸屏/滑动支持的知识。

Here's my code: 这是我的代码：

$(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

This is the simplest image galerie I've ever written, is this what you need? 这是我写过的最简单的图像图库，这是您需要的吗？

<!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 个解决方案

解决方案1
0 2014-03-31 13:22:57

jQuery –具有上一个/下一个按钮的简单图像库

问题描述

1 个解决方案

解决方案1 0 2014-03-31 13:22:57

解决方案1
0 2014-03-31 13:22:57