关于在layui的数据表格中使用 layui.photo 点击放大图片和切换左右图片

最新推荐文章于 2025-04-12 21:58:54 发布

weixin_42974569

最新推荐文章于 2025-04-12 21:58:54 发布

阅读量4.2k

点赞数

文章标签： html js jquery

本文链接：https://blog.youkuaiyun.com/weixin_42974569/article/details/108491647

版权

本文介绍了如何在layui的数据表格中利用layui.photo实现图片点击放大和左右切换功能。通过示例代码展示了如何绑定图片地址数组，并处理表格中图片的显示，避免因对齐方式设置不当导致的意外效果。在JavaScript部分，详细解释了如何定位到当前行的图片并进行切换操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

换不多说，直接上效果图，第一次点击图片的时候需要点两下！！！

我这里用的是layui的数据表格，来看代码：

这个是绑定部分，d.table_img是图片地址数组。我这里循环了，class用的是demo+当前行的id，直接固定class的话会展示全部图片

<script id="showScreenhost" type="text/html">
            <div style="float:left;" class="demo{
  {d.table_id}}" >
                  {
  {# for(var j in d.table_img) { }}
                  <img style=" width:50px;height:50px;" id="photo" layer-src="{
  {d.table_img[j]}}" src="{
  {d.table_img[j]}}" >
                {
  {#}