adminlte modal预览图片显示上下切换效果

最新推荐文章于 2026-06-13 07:12:00 发布

原创最新推荐文章于 2026-06-13 07:12:00 发布 · 1.4k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#jquery #adminlte

网络编程专栏收录该内容

12 篇文章

订阅专栏

博客提供了页面demo和模态框弹出示例，还给出了上一篇说明的参考链接。重点展示了html里的模态框示例，并提及要编写js方法。

页面demo, 模态框弹出示例，参考上一篇说明：https://blog.csdn.net/friend365/article/details/90633012

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" type="text/css" href="boxImg.css">
</head>
<body style="background: #428361">
<div>
<div>
<span href="##" id="#">
<img modal="zoomImg" src="img/bz1.png" height="150px" alt="">
</span>
<img modal="zoomImg" src="img/bz2.png" height="150px" alt="">
</div>
<img modal="zoomImg" src="img/bz3.png" height="150px" alt="">
</div>

<p style="margin: 0">
<img modal="zoomImg" src="img/bz4.png" height="150px" alt="">
<img modal="zoomImg" src="img/bz5.png" height="150px" alt="">
</p>


<div>
<img modal="zoomImg" src="img/bz6.png" height="150px" alt="">
</div>

</body>
</html>

html里面的模态框示例：

    <div class="modal fade" id="viewDialog" role="viewDialog" aria-hidden="true">
        <div class="modal-dialog modal-full">
           <div class="modal-content">
              <div class="modal-header" style="padding:10px !important;padding-bottom:5px;border-bottom:0px !important;">
			    <input type="button" value="上一张" onClick="javascript:maskprev(this)" style="margin-left:185px;">
			    <input type="button" value="下一张" onClick="javascript:masknext(this)" style="margin-left:60px;">
	            <button type="button" class="close" data-dismiss="modal" aria-hidden="true"><i class="fa fa-times"></i></button>
	         </div>
	         
              <div class="modal-body mask-layer-imgbox" style="padding-top:0px;text-align:center;"><!-- height:480px;width:600px -->
                 
              </div>
           </div>  
           <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
     </div>

编写js方法

<script>
//----------------------图片上下切换-------------------//
    var imgDetaillen = $("img[modal='zoomImg']").length;
	var arrDetailPic = new Array();
	for (var i = 0; i < imgDetaillen; i++) {
		arrDetailPic[i] = $("img[modal='zoomImg']").eq(i).prop("src");
	}
    var img_index = $("img[modal='zoomImg']").index(this);
    var numDetail = 0;
	//展示图片
    function showDetailImg() {
         $(".mask-layer-imgbox").append("<img style='width:100%;height:100%' border='0' src=''>");
         $(".mask-layer-imgbox img").prop("src", arrDetailPic[numDetail]);
    }
    //上一张
    function maskprev(obj) {
    	var indexLen = arrDetailPic.indexOf($(".mask-layer-imgbox img").prop("src"));//当前图片索性编号
    	$(".mask-layer-imgbox img").remove();
        numDetail = indexLen -1;
        if (numDetail < 0) {
       	 	numDetail = imgDetaillen - 1;
        }
        showDetailImg();
    }
   //下一张
    function masknext(obj) {
    	var indexLen = arrDetailPic.indexOf($(".mask-layer-imgbox img").prop("src"));//当前图片索性编号
    	$(".mask-layer-imgbox img").remove();
    	 numDetail = indexLen +1;
    	 if (numDetail >= imgDetaillen) {
           	numDetail = 0;//重新从零开始显示
         }
         showDetailImg();
    }
</script>