如何创建用于选择下一张图片，获取其src并将其替换到灯箱上的按钮？

Question

我试图做一个上一个和下一个按钮，以更改“灯箱” img的“ 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

给您的imgs属性命名为img_no，其值应为0、1、2、3、4等。

请参阅此链接以了解我的意思。 无限轮播不起作用