Wordpress 键入j/k或←，跳到下一张和上一张照片/→；

我正试图找到一个wordpress插件或某种方式，使用左/右箭头滚动浏览带有图像的文章。就像跳到下一个div：）

这里举一个例子：

我见过这种在多个网站上滚动的方式，但我无法用谷歌搜索它，所以我可以得到一些结果。 如果有人知道我如何做到这一点，请友好地分享知识：D

---

谢谢

我的一位朋友帮助了我，这是我可能关心的问题的答案：

// should smooth scroll be enabled?
var smooth_scroll = true;

// should we try to scroll to image's left side?
var horizontal_scroll = false;

// duration of smooth scroll (ms)
var duration = 100;

// pause (ms) between smooth scroll frame
var interval = 10;

// min area (px2) of image to include in navigation
var area = 10000;

// no more configurable settings below this comment

var img = document.getElementsByClassName('body-text')[0].getElementsByTagName('img');
var len = img.length;
var images = [];

for (var i=0; i<len; i++) {
    if (img[i].width * img[i].height >= area) {
        images.push(img[i]);
    }
}

len = images.length;

if (!len) {
    return;
}

document.onkeyup = function (e) {
    var key = (window.event) ? event.keyCode : e.keyCode;

    switch (key) {
        case 74: // J
        case 75: // K

            var page_y = scrollY();
            index = -1;

            if (key == 75) {
                for (var i=len-1; i>-1; i--) {
                    position = getElementXY(images[i]);
                    if ((position.y + 5) <= page_y) {
                        index = i;
                        break;
                    }
                }
            } else {
                for (var i=0; i<len; i++) {
                    position = getElementXY(images[i]);
                    if ((position.y - 5) >= page_y) {
                        index = i;
                        break;
                    }
                }
            }

            if (index === -1) {
                return;
            }

            var position = getElementXY(images[index]);
            if (smooth_scroll) {
                var steps = duration / interval;
                var x_step = (horizontal_scroll ? Math.round((position.x - scrollX()) / steps) : 0);
                var y_step = Math.round((position.y - scrollY()) / steps);
                var step = 0;

                function smoothScrollBy() {
                    window.scrollBy(x_step, y_step);
                    if (++step < steps) {
                        setTimeout(smoothScrollBy, interval);
                    } else {
                        window.scrollTo(0, position.y);
                    }
                }

                smoothScrollBy();
            } else {
                scrollTo((horizontal_scroll ? position.x : 0), position.y);
            }

        break;
    }
};

function getElementXY(elem) {
    var x = 0,
            y = 0;

    while (elem.tagName != "BODY") {
        x += elem.offsetLeft;
        y += elem.offsetTop;
        elem = elem.offsetParent;
    }

    return { x: x, y: y };
}

function scrollX() {
    return window.pageXOffset ? window.pageXOffset : document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft;
}

function scrollY() {
    return window.pageYOffset ? window.pageYOffset : document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop;
}

//是否应启用平滑滚动？
var smooth_scroll=true；
//我们是否应该尝试滚动到图像的左侧？
var水平滚动=假；
//平滑滚动的持续时间（毫秒）
var持续时间=100；
//在平滑滚动帧之间暂停（毫秒）
var区间=10；
//导航中包含的图像最小面积（px2）
var面积=10000；
//此注释下面没有更多可配置设置
var img=document.getElementsByClassName（'body-text'）[0].getElementsByTagName（'img'）；
var len=img.长度；
var图像=[]；
对于（变量i=0；i=面积）{
图像推送（img[i]）；
}
}
len=图像长度；
如果（！len）{
返回；
}
document.onkeyup=函数（e）{
var key=（window.event）？event.keyCode:e.keyCode；
开关（钥匙）{
案例74://J
案例75://K
var page_y=scrollY（）；
指数=-1；
如果（键==75）{
对于（变量i=len-1；i>-1；i--）{
位置=getElementXY（图像[i]）；
如果（（position.y+5）尝试查找onkeydown事件和对应键的keycodes。在您的情况下，是j/k的keycode。我设法找到了：这几乎是我所需要的，但我必须为按键进行修改。祝我好运，我真的是一个noob编码员：））祝你好运。一步一步来，胜利属于你。享受编码。：）