Question

我试图添加一个＆＃39; Previous＆＃39;和＆＃39; next＆＃39;按钮将循环浏览我的＆＃34;媒体＆＃34;中的所有图像。下面的div。

我使用jQuery来显示＆＃34;媒体＆＃34;缩略图中的图像，现在想添加上一个和下一个按钮作为查看图像的附加方式。

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

JSFiddle可在此处找到：http://jsfiddle.net/md6u68z1/

现场演示：

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" value="Click Me" id="testbtn">

＆＃13;

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

＆＃13;

.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;
}

＆＃13;

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/

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

1 个答案: