解决Layer.photos带按钮后,小图片显示不出来和长图片翻页按钮点不中的问题

Layer虽然不更新了,但依然十分活跃,笔者在使用的过程中发现Layer.photos带按钮后,小图片显示不出来和长图片翻页按钮点不中的问题,目前我的解决思路是直接限定Area参数的最小宽度和高度,直接在改动layer项目文件

在r.photos下更改以下内容:

var imgHeight=n.height<200?200:n.height;//Mod by Shenjiujun 20220426 NewAdd
                r.close(l.loadi),
                l.index = r.open(i.extend({
                            type: 1,
                            area: function () {
                                var a = [n.width, n.height],
                                o = [i(e).width() - 100, i(e).height() - 100];
                                if (!t.full && (a[0] > o[0] || a[1] > o[1])) {
                                    var r = [a[0] / o[0], a[1] / o[1]];
                                    r[0] > r[1] ? (a[0] = a[0] / r[0], a[1] = a[1] / r[0]) : r[0] < r[1] && (a[0] = a[0] / r[1], a[1] = a[1] / r[1])
                                }
								var a0=a[0]<200?200:a[0];//Mod by Shenjiujun 20220426 NewAdd
								var a1=a[1]<200?200:a[1];//Mod by Shenjiujun 20220426 NewAdd
                                return [a0 + "px", a1 + "px"];
								//return [a[0] + "px", a[1] + "px"];//Moded
                            }
                            (),
                            title: !1,
                            shade: .9,
                            shadeClose: !0,
                            closeBtn: !1,
                            move: ".layui-layer-phimg img",
                            moveType: 1,
                            scrollbar: !1,
                            moveOut: !0,
                            anim: 5 * Math.random() | 0,
                            skin: "layui-layer-photos" + c("photos"),
                            content: '<div class="layui-layer-phimg" style="height:'+imgHeight+'px"><img src="' + d[u].src + '" alt="' + (d[u].alt || "") + '" layer-pid="' + d[u].pid + '"><div class="layui-layer-imgsee">' + (d.length > 1 ? '<span class="layui-layer-imguide"><a href="javascript:;" class="layui-layer-iconext layui-layer-imgprev"></a><a href="javascript:;" class="layui-layer-iconext layui-layer-imgnext"></a></span>' : "") + '<div class="layui-layer-imgbar" style="display:' + (a ? "block" : "") + '"><span class="layui-layer-imgtit"><a href="javascript:;">' + (d[u].alt || "") + "</a><em>" + l.imgIndex + "/" + d.length + "</em></span></div></div></div>",
                            success: function (e, i) {
                                l.bigimg = e.find(".layui-layer-phimg"),
                                l.imgsee = e.find(".layui-layer-imguide,.layui-layer-imgbar"),
                                l.event(e),
                                t.tab && t.tab(d[u], e)
                            },
                            end: function () {
                                l.end = !0,
                                i(document).off("keyup", l.keyup)
                            }
                        }, t))
            }

注释部分为修改的部分

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
可以通过以下 HTML 和 JavaScript 代码实现: HTML 代码: ```html <div id="images"> <img src="image1.jpg" data-src="large1.jpg"> <img src="image2.jpg" data-src="large2.jpg"> <img src="image3.jpg" data-src="large3.jpg"> <img src="image4.jpg" data-src="large4.jpg"> <img src="image5.jpg" data-src="large5.jpg"> </div> <div id="large-image"> <img src=""> </div> ``` JavaScript 代码: ```javascript // 获取小图片列表和大图片元素 const images = document.querySelectorAll('#images img'); const largeImage = document.querySelector('#large-image img'); // 遍历小图片列表,为每一个小图片添加鼠标移入和移出事件 images.forEach(img => { img.addEventListener('mouseover', () => { // 移入事件:添加红色边框和显示图片 img.style.border = '2px solid red'; const largeSrc = img.dataset.src; largeImage.src = largeSrc; }); img.addEventListener('mouseout', () => { // 移出事件:移除红色边框和隐藏大图片 img.style.border = ''; largeImage.src = ''; }); }); ``` 解释一下代码: 1. 首先获取小图片列表和大图片元素。 2. 遍历小图片列表,为每一个小图片添加鼠标移入和移出事件。 3. 在鼠标移入事件,添加红色边框和显示图片。通过 `data-src` 属性获取大图片的地址,并将其赋值给大图片元素的 `src` 属性。 4. 在鼠标移出事件,移除红色边框和隐藏大图片。将小图片元素的边框样式设为空字符串,将大图片元素的 `src` 属性设为空字符串。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值