javascript - 如何创建一个按钮来选择下一张图片，获取其 src 并将其替换为灯箱？

Question

我正在尝试制作一个 prev 和 next 按钮来更改“lightbox”img 的 de“src”属性。基本上，当您单击缩略图时，jquery 脚本获取其 src 并将其放置在灯箱上，现在我需要制作一个按钮，让我获取下一个和上一个 img(或缩略图？)的 src。

$(document).ready(function(){
    $(".thumbnail").click(function(){
        var address= $(this).attr("src");
        $("#popup").fadeIn("slow");
        $("#lightbox").attr("src",address);
        $(".footer").fadeToggle("fast");
    });
    $("#close").click(function(){
        $("#popup").fadeOut("slow",function(){
            $(".footer").fadeToggle("fast");
        });
    });
    $("#next").click(function(){
        $("#lightbox").removeAttr("src");
    });
});

---

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

---

<div id="popupslide">    
   <div id="popup">
      <div id="center">
         <img id="lightbox" src="" >
         <img id="close" src="fotos/fotoscidade/close.png">
         <img id="next" src="fotos/fotoscidade/close.png">
         <img id="prev" src="fotos/fotoscidade/close.png">
      </div>
   </div>
</div>
<div>
   <ul class="sidebside">
      <li>
          <img src="fotos/fotoscidade/MorroDC/asa.jpg" class="thumbnail" width="200">
      </li>
      <li>
          <img src="fotos/fotoscidade/MorroDC/Balne%C3%A1rio%20Morro%20dos%20Conventos.jpg" class="thumbnail" width="200">
      </li>
      <li>
          <img src="fotos/fotoscidade/MorroDC/asa.jpg" class="thumbnail" width="200">
      </li>
      <li>
          <img src="fotos/fotoscidade/MorroDC/Balne%C3%A1rio%20Morro%20dos%20Conventos.jpg" class="thumbnail" width="200">
      </li>
      <li>
          <img src="fotos/fotoscidade/MorroDC/asa.jpg" class="thumbnail" width="200">
      </li>
      <li>
          <img src="fotos/fotoscidade/MorroDC/Balne%C3%A1rio%20Morro%20dos%20Conventos.jpg" class="thumbnail" width="200">
      </li>
      <li>
          <img src="fotos/fotoscidade/MorroDC/asa.jpg" class="thumbnail" width="200">
      </li>
      <li>
          <img src="fotos/fotoscidade/MorroDC/Balne%C3%A1rio%20Morro%20dos%20Conventos.jpg" class="thumbnail" width="200">
      </li>
   </ul>
</div>

Answer 1

为名为 img_no 的 imgs 属性提供 0、1、2、3、4 等值。使用该值，parseInt 并根据它获取 src。

请参阅此链接以了解我的意思。 Infinite carousel doesnt work