为图像添加上一个和下一个按钮

Question

我正在尝试添加一个“上一个”和“下一个”按钮，它将循环浏览下面我的“中等”div 中的所有图像。

我正在使用 jQuery 从缩略图中显示“中等”图像，现在想添加上一个和下一个按钮作为查看图像的附加方式。

有没有一种快速的方法来添加该功能并让它循环运行？

JSFiddle 在这里可用：http://jsfiddle.net/md6u68z1/

现场演示：

$(function() {
  $(".medium img:eq(0)").nextAll().hide();
  $(".thumbs img").click(function(e) {
    var index = $(this).index();
    $(".medium img").eq(index).show().siblings().hide();
  });
});

.thumbs img {
  width: 30%;
  float: left;
  box-sizing: border-box;
  padding: 10px;
}
.medium {
  padding-bottom: 10px;
}
.medium img {
  width: 90%;
}
.thumbs img:hover {
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="medium">
  <img src="http://cbsnews2.cbsistatic.com/hub/i/r/2014/11/28/45be34dd-e568-40e4-9e2c-a89be231686b/thumbnail/620x350/6042a86399feb71dcb10a73aaa3baf6f/star-wars-force-awakens-teaser-lightsaber-promo.jpg" />

  <img src="http://cdn.idigitaltimes.com/sites/idigitaltimes.com/files/styles/large/public/2015/06/27/star-wars-force-awakens-teaser-3.jpg" />

  <img src="http://www.igoodmorning.net/wp-content/uploads/2015/08/Star-Wars-The-Force-Awakens-Wallpapers.jpg" />
</div>


<div class="thumbs">
  <img src="http://cbsnews2.cbsistatic.com/hub/i/r/2014/11/28/45be34dd-e568-40e4-9e2c-a89be231686b/thumbnail/620x350/6042a86399feb71dcb10a73aaa3baf6f/star-wars-force-awakens-teaser-lightsaber-promo.jpg">

  <img src="http://cdn.idigitaltimes.com/sites/idigitaltimes.com/files/styles/large/public/2015/06/27/star-wars-force-awakens-teaser-3.jpg">

  <img src="http://www.igoodmorning.net/wp-content/uploads/2015/08/Star-Wars-The-Force-Awakens-Wallpapers.jpg">
</div>

Answer 1

这是添加下一个和上一个按钮的一种方法，使用索引变量来跟踪当前显示的图像。

现场演示：

var index = 0;
var total = $(".medium img").length;

$(function() {
  $(".medium img:eq(0)").nextAll().hide();
  $(".thumbs img").click(function(e) {
    var index = $(this).index();
    $(".medium img").eq(index).show().siblings().hide();
  });
});

$("#prev").click(function() {
  index--;
  if (index < 0) index = total - 1;
  $(".medium img").eq(index).show().siblings().hide();
});

$("#next").click(function() {
  index++;
  if (index >= total) index = 0;
  $(".medium img").eq(index).show().siblings().hide();
});

.thumbs img {
  width: 30%;
  float: left;
  box-sizing: border-box;
  padding: 10px;
}
.medium {
  padding-bottom: 10px;
}
.medium img {
  width: 90%;
}
.thumbs img:hover {
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="medium">
  <img src="http://cbsnews2.cbsistatic.com/hub/i/r/2014/11/28/45be34dd-e568-40e4-9e2c-a89be231686b/thumbnail/620x350/6042a86399feb71dcb10a73aaa3baf6f/star-wars-force-awakens-teaser-lightsaber-promo.jpg" />

  <img src="http://cdn.idigitaltimes.com/sites/idigitaltimes.com/files/styles/large/public/2015/06/27/star-wars-force-awakens-teaser-3.jpg" />

  <img src="http://www.igoodmorning.net/wp-content/uploads/2015/08/Star-Wars-The-Force-Awakens-Wallpapers.jpg" />
</div>


<div class="thumbs">
  <img src="http://cbsnews2.cbsistatic.com/hub/i/r/2014/11/28/45be34dd-e568-40e4-9e2c-a89be231686b/thumbnail/620x350/6042a86399feb71dcb10a73aaa3baf6f/star-wars-force-awakens-teaser-lightsaber-promo.jpg">

  <img src="http://cdn.idigitaltimes.com/sites/idigitaltimes.com/files/styles/large/public/2015/06/27/star-wars-force-awakens-teaser-3.jpg">

  <img src="http://www.igoodmorning.net/wp-content/uploads/2015/08/Star-Wars-The-Force-Awakens-Wallpapers.jpg">
</div>

<button id="prev">previous</button>
<button id="next">next</button>

JSFiddle 版本：http://jsfiddle.net/md6u68z1/1/