javascript - 按键时的幻灯片无法正常工作

Question

所以我有这个代码。我做错事了。我希望左箭头返回(显示上一张图像)，但它不起作用。它显示下一个图像(如右箭头)。无论我单击什么箭头，无论向左还是向右，它都会显示下一张图像。我尝试了数百万种不同的方法，但似乎找不到问题所在。谁能帮我吗？

我也喜欢循环播放源。当到达数组中的最后一个源时，我想再次循环回到第一个源(当到达第一个源时，返回到最后一个源)。

顺便说一句，我还有一个用于在单击时更改图像的代码。我很确定它与问题无关，但我决定保留它，以防万一它搞砸了。
谢谢:)

<小时/>

HTML:

<div class="container">
    <div id="slideshow"> 
        <img alt="slideshow" src="1.jpg" id="imgClickAndChange" onclick="changeImage()"/> 
    </div>
</div>

JS:

<script>
    var imgs = ["2.jpg", "3.jpg", "4.jpg", "5.jpg"];

    function changeImage(dir) {
        var img = document.getElementById("imgClickAndChange");
        img.src = imgs[imgs.indexOf(img.src) + (dir || 1)] || imgs[dir ? imgs.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') {
            changeImage() // right -> show next image
        }
    }
</script>

<script language="javascript">
    var imgs = ["2.jpg", "3.jpg", "4.jpg", "5.jpg"];
    function changeImage() {
        document.getElementById("imgClickAndChange").src = imgs[0];
        imgs.push(imgs.shift())
    }
</script>

Answer 1

你的方向是正确的，但你犯了一些错误:

• 您有两个同名的变量。
• 您有两个同名的函数。
• 如果函数需要参数，则必须始终发送参数(或 null)，不能仅向左发送 -1，而对右不发送任何内容。 (就您而言，如果不发送正确的 1，实际上会让您自己变得更加困难)。
• || imgs[目录？ imgs.length - 1 : 0]，并没有按照您的想法进行操作。您正在检查 dir ，就好像它是一个 bool 值一样。 JavaScript 可以将 1 和 -1 解释为 bool 值(分别为 true 和 false)，但因为您只发送-1它将无法正常工作。

以下是已修复这些问题的代码:

<小时/>

JS、HTML:

var imgs = ["/image/NjC6V.jpg",
            "/image/0eBBQ.gif",
            "/image/uhjjB.png",
            "/image/cNhjf.jpg",
            "/image/Dn175.png"];

document.onkeydown = function(event) {
  var e = event || window.event;
  if (e.keyCode == '37') { //LEFT
    changeImage(-1);
  } else if (e.keyCode == '39') { //RIGHT
    changeImage(1);
  }
}

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

#imgClickAndChange {
  width: 150px;
  height: 150px;
}

<div class="container">
  <div id="slideshow"> 
    <img id="imgClickAndChange" src="/image/NjC6V.jpg" alt="" onclick="changeImage(1)" /> 
  </div>
</div>

( fiddle :http://jsfiddle.net/k3wxhc58/8/ )

• 在三元运算符中，您可以使用 dir 而不是 (dir==1)，因为 JavaScript 将 1 转换为 true。但使用 (dir==1) 更安全，因为这将创建一个真正的 bool 值。
• 我用实际存在的图像链接替换了 imgs 数组中的图像，以便脚本正常运行而不会出现任何错误。
• 我添加了一些 CSS，这只是为了答案，以便所有图像具有相同的大小。

<小时/>

如果您不希望图像循环，请将 changeImage() 函数更改为:

function changeImage(dir) {
    var img = document.getElementById("imgClickAndChange");
    var newSrc = imgs[imgs.indexOf(img.src)+dir];

    if (imgs.indexOf(newSrc) != -1) { //only sets new src if it's in the imgs-array (i.e. if it exists)
        img.src = newSrc;
    }
}

( fiddle :http://jsfiddle.net/k3wxhc58/9/ )