update：图片弹窗支持左右键列表翻页v1

src/main/resources/static/js/my-picture.js

@@ -4,6 +4,7 @@ $(function () {
 });
 
 var scale = 1;  // 初始缩放比例
+var lastfirstFlag = '';
 
 /**
  * 初始化其他操作
@@ -376,10 +377,25 @@ function initContentEvent() {
         window.open(orginUrl, "_blank");
     });
 
+    var currentIndex = -1; // 当前图片索引
+    var bigpreviewlist = $("ul.myui-vodlist .bigpreview");
+    if ($(".modal").is(':visible')) {
+        if (lastfirstFlag === 'last') {
+            currentIndex = 0;
+        } else if (lastfirstFlag === 'first') {
+            currentIndex = 9;
+        }
+
+        $("#modal").find("img").attr("src", bigpreviewlist.eq(currentIndex).attr('imgurl'));
+    }
+    lastfirstFlag = '';
+
     $(".bigpreview,.close").click(function () {
         if ($("#modal").css("display") === 'none') {
             $("#modal").css("display", "block");
             $("#modal").find("img").attr("src", $(this).attr("imgUrl"));
+
+            currentIndex = bigpreviewlist.index(this);
         } else if ($("#modal").css("display") === 'block') {
             $("#modal").css("display", "none");
             $("#modal").find("img").attr("src", "");
@@ -407,6 +423,55 @@ function initContentEvent() {
                 scale = 1;
                 $('#modal-image').css('transform', 'scale(' + scale + ')');
             }
+        } else if ($(".modal").is(':visible')) {
+            // 左右方向键切换图片
+            if (event.key === 'ArrowRight') {
+                if (currentIndex === bigpreviewlist.length - 1) {
+                    console.log("到头了end");
+
+                    var xsPage = $("ul.myui-page > li.visible-xs").find("a").text();
+                    var currentPageNo = xsPage.split("/")[0];
+                    var totalPageNo = xsPage.split("/")[1];
+                    if (currentPageNo === totalPageNo) {
+                        alert("真到头了end");
+                    } else {
+                        unbindPageEvent();
+
+                        lastfirstFlag = 'last';
+                        $(".myui-page").find("#last-page").click();
+                        $("#modal").find("img").attr("src", "cover/loading.gif");
+                    }
+                } else {
+                    currentIndex = (currentIndex + 1) % bigpreviewlist.length;  // 循环切换到下一张图片
+                    $("#modal").find("img").attr("src", bigpreviewlist.eq(currentIndex).attr('imgurl'));
+                }
+            } else if (event.key === 'ArrowLeft') {
+                if (currentIndex === 0) {
+                    console.log("到头了start");
+
+                    var xsPage = $("ul.myui-page > li.visible-xs").find("a").text();
+                    var currentPageNo = xsPage.split("/")[0];
+                    var totalPageNo = xsPage.split("/")[1];
+                    if (currentPageNo === '1') {
+                        alert("真到头了start");
+                    } else {
+                        unbindPageEvent();
+
+                        lastfirstFlag = 'first';
+                        $(".myui-page").find("#first-page").click();
+                        $("#modal").find("img").attr("src", "cover/loading.gif");
+                    }
+                } else {
+                    currentIndex = (currentIndex - 1 + bigpreviewlist.length) % bigpreviewlist.length;  // 循环切换到上一张图片
+                    $("#modal").find("img").attr("src", bigpreviewlist.eq(currentIndex).attr('imgurl'));
+                }
+            }
         }
     });
+}
+
+function unbindPageEvent() {
+    $(document).off('keydown');
+    // $(window).off('click');
+    $(".close").off('click');
 }