幻灯片显示图像文件名在按钮图标上点击之前？

Question

示例：我在幻灯片中有3个图像名称： Image1.png ， Image2.png ， Image3.png 。如果幻灯片显示当前显示 Image2 ，是否可以在后退/前进按钮中显示 Image1.png 和 Image3.png 的名称？

像这样RESULT

$(window).load(function() {
  var pages = $('#container li'),
    current = 0;
  var currentPage, nextPage;

  $('#container .button').click(function() {
    currentPage = pages.eq(current);
    if ($(this).hasClass('prevButton')) {

      if (current <= 0)
        current = pages.length - 1;
      else
        current = current - 1;
    } else {
      if (current >= pages.length - 1)
        current = 0;
      else
        current = current + 1;
    }
    nextPage = pages.eq(current);
    currentPage.hide();
    nextPage.show();
  });
});

* {
  margin: 0;
  padding: 0;
}

#container {
  width: 1682px;
  height: 1080px;
  position: relative;
}

#container .prevButton {
  height: 68px;
  width: 250px;
  position: absolute;
  background: url('http://i.imgur.com/wGfzuSp.png') no-repeat;
  bottom: 10px;
  margin-top: -36px;
  z-index: 2000;
  background-position: left top;
  left: 35%;
}


/*#container .prevButton:hover{ background-position:left bottom;left:0;}*/

#container .nextButton {
  height: 68px;
  width: 250px;
  position: absolute;
  background: url('http://i.imgur.com/SWRSzhE.png') no-repeat;
  bottom: 10px;
  margin-top: -36px;
  z-index: 2000;
  background-position: right top;
  right: 35%;
}


/*#container .nextButton:hover{background-position:right bottom;right:0;}*/

#container ul {
  width: 1682px;
  height: 1080px;
  list-style: none outside none;
  position: relative;
  overflow: hidden;
}

#container li:first-child {
  display: list-item;
  position: absolute;
}

#container li {
  position: absolute;
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<center>
  <div id="container">
    <ul>
      <li><img src="http://i.imgur.com/2deLsUhb.jpg" width="1920" height="1080"></li>
      <li><img src="http://i.imgur.com/w8Jydunb.jpg" width="1920" height="1080"></li>
      <li><img src="http://i.imgur.com/CFXBhjtb.jpg " width="1920" height="1080"></li>
    </ul>
    <span class="button prevButton"></span>
    <span class="button nextButton"></span>
  </div>
</center>

Answer 1

试试这个

$(window).load(function() {
  var prevIndex = 0;
  var nextIndex = 1;
  var pages = $('#container li'),
    current = 0;
  var currentPage, nextPage;
  prevIndex = pages.length - 1;

  $('.prevButton').html($(pages[prevIndex]).attr('name'));
  $('.nextButton').html($(pages[nextIndex]).attr('name'));
  $('#container .button').click(function() {
    currentPage = pages.eq(current);
    if ($(this).hasClass('prevButton')) {

      if (current <= 0)
        current = pages.length - 1;
      else
        current = current - 1;
    } else {
      if (current >= pages.length - 1)
        current = 0;
      else
        current = current + 1;
    }
    if (current <= 0)
      prevIndex = pages.length - 1;
    else prevIndex = current - 1;
    if (current >= pages.length - 1)
      nextIndex = 0;
    else
      nextIndex = current + 1;
    $('.prevButton').html($(pages[prevIndex]).attr('name'));
    $('.nextButton').html($(pages[nextIndex]).attr('name'));
    nextPage = pages.eq(current);
    currentPage.hide();
    nextPage.show();
  });
});

* {
  margin: 0;
  padding: 0;
}

#container {
  width: 1682px;
  height: 1080px;
  position: relative;
}

#container .prevButton {
  height: 68px;
  width: 250px;
  position: absolute;
  background: url('http://i.imgur.com/wGfzuSp.png') no-repeat;
  bottom: 10px;
  margin-top: -36px;
  z-index: 2000;
  background-position: left top;
  left: 35%;
}


/*#container .prevButton:hover{ background-position:left bottom;left:0;}*/

#container .nextButton {
  height: 68px;
  width: 250px;
  position: absolute;
  background: url('http://i.imgur.com/SWRSzhE.png') no-repeat;
  bottom: 10px;
  margin-top: -36px;
  z-index: 2000;
  background-position: right top;
  right: 35%;
}


/*#container .nextButton:hover{background-position:right bottom;right:0;}*/

#container ul {
  width: 1682px;
  height: 1080px;
  list-style: none outside none;
  position: relative;
  overflow: hidden;
}

#container li:first-child {
  display: list-item;
  position: absolute;
}

#container li {
  position: absolute;
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<center>
  <div id="container">
    <ul>
      <li name="img1"><img src="http://i.imgur.com/2deLsUhb.jpg" width="1920" height="1080"></li>
      <li name="img2"><img src="http://i.imgur.com/w8Jydunb.jpg" width="1920" height="1080"></li>
      <li name="img3"><img src="http://i.imgur.com/CFXBhjtb.jpg " width="1920" height="1080"></li>
    </ul>
    <span class="button prevButton"></span>
    <span class="button nextButton"></span>
  </div>
</center>

Answer 2

我认为你可以使用bootstrap轮播。要显示prev和forward图像的名称，您可以使用所需的名称或图像替换前一个和前一个符号。