Question

我来这里寻求帮助。我正在使用javascript创建一些onkeypress想要幻想的幻灯片。我使用的代码就在那里。我想为我使用的照片添加一些描述，我希望它能够更改为与当前图片相对应，所以当我有＆＃34;图片1＆＃34;，文字＆＃34;描述1＆＃ 34;显示，然后＆＃34;图片2＆＃34;和＆＃34;描述2＆＃34;出现等等......有什么建议吗？谢谢你的帮助！
PS。：如果你愿意帮助我，请记住，我不知道我在做什么...

let images = ["https://static.boredpanda.com/blog/wp-content/uploads/2017/03/189578_205761_4_-Yuan-Peng-China-Shortlist-Professional-Sport-2017-Sony-World-Photography-Awards-58c68fa8b4532__880.jpg", 
      "https://static.boredpanda.com/blog/wp-content/uploads/2017/03/212367_227257_1_-Adi-Bulboac-Romania-Shortlist-Professional-Architecture-2017-Sony-World-Photography-Awards-58c68fe283e62__880.jpg", 
      "https://static.boredpanda.com/blog/wp-content/uploads/2017/03/217609_232497_0_-Wilson-Lee-China-Shortlist-Open-Competition-Still-Life-2017-Sony-World-Photography-Awards-58c68fed34611__880.jpg"];

    function changeImage(dir) {
        let img = document.getElementById("imgClickAndChange");
        img.src = images[images.indexOf(img.src) + (dir || 1)] || images[dir ? images.length - 1 : 0];
    }

    document.onkeydown = function(e) {
        e = e || window.event;
        if (e.keyCode == '37') {
            changeImage(-1) //left <- show Prev image
        } else if (e.keyCode == '39') {
            // right -> show next image
            changeImage()
        }
    }

Answer 1

您可以下载此jQuery-sliderResponsive并在按键上调用此功能并按住键。该代码仅适用于此滑块。

document.onkeydown = function(e) {
    e = e || window.event;
    if (e.keyCode == '37') {
        prevSlide(); // Previous
    } else if (e.keyCode == '39') {
        nextSlide(); // Next
    }
}

Answer 2

您应该使用现有的插件。但是，如果您想要继续这条路径，您可以使用另一个包含描述的数组，匹配位置。这样的事情应该有效：

let descriptions = ["It hurts!", "This is a room with small chairs (no kidding!!)", "Painting?"];
let currentIndex = 0;

function changeImage(dir) {
        // Get the index
    let img = document.getElementById("imgClickAndChange");
    let newIndex = currentIndex + dir;
    currentIndex = images[newIndex] != undefined ? newIndex : (dir > 0 ? 0 : images.length-1);

    // Change the picture
    img.src = images[currentIndex];

    // Change the description
    document.getElementById("description").innerHTML = descriptions[currentIndex];
}

document.onkeydown = function(e) {
    e = e || window.event;
    if (e.keyCode == '37') {
        changeImage(-1) //left <- show Prev image
    } else if (e.keyCode == '39') {
        // right -> show next image
        changeImage(1)
    }
}

以下是示例代码： https://jsfiddle.net/fwgk7stt/

Onkeypress幻灯片显示更改

2 个答案: