图片点击放大轮播

最新推荐文章于 2020-06-14 18:34:28 发布

前燕慕容恪

最新推荐文章于 2020-06-14 18:34:28 发布

阅读量1.1k

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/qq_31935559/article/details/80916938

版权

前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

效果图

html代码：

<ul class="dp-file" id="galley" >
    <c:forEach var="file" varStatus="status" items="${bean.homeWorkFiles}">
	<c:if test="${file.type==0}">
	     <a class="lightbox" href="${file.url}" style="margin-top: 5px;padding: 0;list-style: none;text-align: left;width: 80px;height: 80px;float: left;margin-right: 10px;">
		  <img src="${file.url}"  style="width: 80px;height: 80px;border-radius: 10px;">
	     </a>
	</c:if>
   </c:forEach>
   <script>
     baguetteBox.run('.dp-file');
   </script>
</ul>

引用：

<link rel="stylesheet" href="${ctx}/static/vendor/lightbox/css/baguetteBox.min.css" />
<script src="${ctx}/static/vendor/lightbox/js/baguetteBox.min.js"></script>

资源下载地址：https://download.csdn.net/download/qq_31935559/10520133