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

Adding previous and next buttons for images

本文关键字：下一个 按钮 上一个 图像 添加      更新时间：2023-09-26

我正在尝试添加一个'上一个'和'下一个'按钮，将循环通过我的"medium"div下面的所有图像。

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

是否有一种快速添加该功能并使其循环的方法?

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>

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

现场演示: 

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/

相关文章：