按键上的幻灯片显示无法正常工作

时间:2014-10-26 13:09:55

标签: javascript html keyboard slideshow onkeypress

所以我有这个代码。我做错了什么。我希望左箭头返回(显示上一张图片),但它不起作用。它显示下一个图像(如右箭头)。无论我点击什么箭头,向左或向右它都会显示下一张图像。我已经尝试过数百万种不同的东西,而我似乎无法找到问题所在。任何人都可以帮助我吗?

我也喜欢循环的来源。当达到阵列中的最后一个源时,我想再次循环回到第一个源(当你到达第一个源时,回到最后一个源)。

顺便说一下,我还有一个代码,可以在点击时更改图像。我很确定它与问题无关,但我决定保留它,以防万一它弄乱了。
谢谢:)


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>

1 个答案:

答案 0 :(得分:1)

你走在正确的轨道上,但你有一些错误:

  • 您有两个名称相同的变量。
  • 您有两个具有相同名称的功能。
  • 如果一个函数需要一个参数,你必须总是发送一个参数(或null),你不仅可以发送-1代表左边,也不需要发送任何内容。 (在你的情况下,你实际上通过不发送1权利来让自己变得更加困难。)
  • || imgs[dir ? imgs.length - 1 : 0],不会按照您的想法行事。您正在检查dir,好像它是一个布尔值。 JavaScript可以将1-1解释为布尔值(分别为truefalse),但由于您只发送-1,因此无法正常运行。

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


JS,HTML:

&#13;
&#13;
var imgs = ["http://i.stack.imgur.com/NjC6V.jpg",
            "http://i.stack.imgur.com/0eBBQ.gif",
            "http://i.stack.imgur.com/uhjjB.png",
            "http://i.stack.imgur.com/cNhjf.jpg",
            "http://i.stack.imgur.com/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];
}
&#13;
#imgClickAndChange {
  width: 150px;
  height: 150px;
}
&#13;
<div class="container">
  <div id="slideshow"> 
    <img id="imgClickAndChange" src="http://i.stack.imgur.com/NjC6V.jpg" alt="" onclick="changeImage(1)" /> 
  </div>
</div>
&#13;
&#13;
&#13; (小提琴:http://jsfiddle.net/k3wxhc58/8/

  • 在三元运算符中,您可以使用(dir==1)代替dir,因为JavaScript会将1转换为true。但使用(dir==1)更安全,因为这将创建一个真正的布尔值。
  • 我将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;
    }
}

小提琴:http://jsfiddle.net/k3wxhc58/9/