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

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/