创建带有next和prev按钮的图像查看器。
我正在创建一个图像框。在正文中，出现了图像缩略图，单击它们，我希望在弹出中显示单击的图像，并显示下一个按钮和prev按钮。
<html>
<head>
<style>
.image_box{height:600px; width: 1000px;}
.image_1{height: 100px; width: 100px; float: left; margin: 10px 0 0 10px;}
.my_popUp{top:0; left:0; right:0; bottom: 0; background: rgba(####);
position: absolute;}
.box_pop_up{float: left; margin-left: 20px;}
</style>
<script>
function hidePopUp(){
$('.my_popUp').hide();
}
function showPopUp(){
$('.my_popUp').show();
}
$(function(){
$('.image_1').on('click', function({
showPopUp();
});
$('.my_popUp').on('click', function({
hidePopUp();
});
});
</script>
</head>
<body>
<div class="image_box">
<div class="image_1"><img src="......" /></div>
<div class="image_1"><img src="......" /></div>
<div class="image_1"><img src="......" /></div>
<div class="image_1"><img src="......" /></div>
</div>
<div class="my_popUp">
<div class="left_button_box box_pop_up"><img src="prev.png"></div>
<div class="center_image_box box_pop_up"></div>
<div class="right_button_box box_pop_up"><img src="next.png"></div>
</div>
</body>
</html>所以我通过点击图像缩略图创建了一个图像查看框，缩略图在弹出的居中图像框中显示放大，下一个图像框应该通过单击next和prev按钮来显示，而且我还想假设用户单击了四个中的任意图像，所以图像应该是在弹出中打开的，我怎么能这样做呢？下一张预告图像。请帮我解决这个问题，还有另外一个问题，如果我使用的是选项卡式相册，就像我有四张相册，每个相册都是在选项卡结构中，如果我移动到不同的选项卡相册框中以获得相同的功能，那么我需要添加哪些代码来定义当前使用图像显示代码的相册？
回答 2
Stack Overflow用户
发布于 2014-02-06 06:42:43
大多数直截了当的解决方案都使用像http://fancyapps.com/fancybox/这样的图像照明盒。
或者在谷歌上搜索“图像照明盒”。
Stack Overflow用户
发布于 2014-02-06 07:40:03
如果您不想使用在线可用的现有灯箱，您可以检查这个教程1 ，教程2如何创建一个非常简单的lightbox。但就像垫子的答案，你可以简单地下载任何现有的灯箱插件，检查下面的链接。
http://www.dreamcss.com/2009/03/31-mind-blowing-collection-of-jquery.html
https://stackoverflow.com/questions/21595762
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号