Question

我有一个用jQuery创建的图库，当我点击每个图像并且它出现在另一个div中时它非常有效。一切都是用Bootstrap创建的。但我还想添加一个prev和后退箭头按钮，我不知道如何做到这一点。

这是HTML：

<html>
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <!-- Optional theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

    <style>
    .selected { border: 2px solid #000; }
    .output img {
      margin:0 auto;
    }
    </style>
    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
    <script src="JS/lightbox.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
  <body>
    <div class="container container-fluid ">
      <div class="row text-center gallery">
      <h2>Gallery</h2>
      <div class="col-sm-4 ">
        <p>Dimebag</p>
        <img src="http://img.wennermedia.com/article-leads-horizontal/rs-3616-rectangle.jpg"  class="img-responsive"  alt="Dimebag">
      </div>
      <div class="col-sm-4 ">
        <p>Zack Wylde</p>
        <img src="http://loudwire.com/files/2016/05/Ozzfest-Knotfest-ZakkSabbath-20160512-KathyFlynn-4393.jpg?w=630&h=420&zc=1&s=0&a=t&q=89" class="img-responsive" style="width:100%" alt="Zack">
      </div>
      <div class="col-sm-4 ">
        <p>Slash</p>
        <img src="http://mmusicmag.com/m/wp-content/uploads/2015/01/Slash-Issue-No37.jpg"  class="img-responsive" style="width:100%"  alt="Slash">
      </div>
    </div><!--row-->
    <hr>
    <div class="row ">
      <div class="text-center arrows">
        <a class="prev" >&#10094;</a>
        <a class="next" >&#10095;</a>
      </div><!--arrows-->
      <div class="col-md-12 output"></div>
    </div><!--row-->
    </div>
    </div><!--container-fluid-->
  </body>
</html>

这是jQuery代码：

$(document).ready(function(){
  $(".output").hide();
  $(".arrows").hide();
  $('img').click(function(){
    $(".output").html('<img class="img-responsive " src="' + $(this).attr('src') + '"/>').fadeIn();
    $(".arrows").fadeIn();
  });//click
  //Arrows
  $('.next').click(function(){
  //Code Here
  });//next
});

我知道我必须在函数中添加一些编码，然后使用类定位箭头，但我不确定是什么。

使用jQuery从头开始创建一个灯箱

0 个答案: