在按键上幻灯片无法正常工作 [英] Slideshow on key press not working properly

问题描述

所以我有这个代码。我做错了什么。我想要左箭头返回（显示前一张图片），但它不起作用。它显示下一个图像（如右箭头）。无论我点击哪个箭头，左侧或右侧都会显示下一张图像。我已经尝试了数百万种不同的东西，我似乎无法找到问题所在。任何人都可以帮我吗？

我也喜欢循环的源代码。当数组中的最后一个源已经到达时，我想再循环回到第一个源（当到达第一个源时返回到最后一个源）。

Btw ，我还有一个代码让图片在点击时改变。我很确定它与问题无关，但我决定保留它，以防万一它搞砸了。

谢谢:)

---

HTML：

 < ; div class =container> 
< div id =slideshow> 
< img alt =slideshowsrc =1.jpgid =imgClickAndChangeonclick =changeImage（）/> 
< / div> 
< / div> 
  

JS：

 <脚本> 
 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<  - 显示上一张图片
} else if（e.keyCode =='39' ）{
 changeImage（）// right  - >显示下一张图片
} 
} 
< / 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> 
  

解决方案

你在正确的轨道上，有几件事情是错误的：

• 您有两个同名的变量。如果一个函数需要一个参数，则必须始终发送一个参数（或 null ），但是不能使用相同的名称。
  
• 只向左边发送 -1 ，没有任何东西是正确的。 （在你的情况下，你实际上通过不向右方发送 1 ）使自己更加困难。


• || imgs [dir？ imgs.length - 1：0] ，并不符合你的想法。你正在检查 dir ，就好像它是一个布尔值。 JavaScript可以将 1 和 -1 解释为布尔值（ true 和 false ），但是因为您只发送 -1 ，所以无法正常运行。





以下是您的代码，修正了这些问题：



---





JS，HTML：



  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];}  

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

 < div class =container > < div id =slideshow> < img id =imgClickAndChangesrc =http://i.stack.imgur.com/NjC6V.jpgalt =onclick =changeImage（1）/> < / div>< / div>  

/jsfiddle.net/k3wxhc58/8/rel =nofollow> http://jsfiddle.net/k3wxhc58/8/ ）






• 在三元运算符中，不是（dir == 1），您可以使用 dir ，因为JavaScript会将 1 转换为 true 。但是使用（dir == 1）会更安全，因为这会创建一个真正的布尔值。 c $ c> imgs -array带有指向实际存在的图像的链接，以便脚本无任何错误地工作。


• 我添加了一些CSS，这只是为了答案，所有图片都有相同的尺寸。






---





如果您不希望图像循环，请将 changeImage（）函数更改为：

  function changeImage（dir）{
 var img = document.getElementById（imgClickAndChange）; 
 var newSrc = imgs [imgs.indexOf（img.src）+ dir]; 
 
 if（imgs.indexOf（newSrc）！= -1）{//只设置新的src，如果它在imgs-array中（即，如果存在）
 img.src = newSrc ; 
 
 
 code 
 $ b 
（小提琴： http://jsfiddle.net/k3wxhc58/9/  ）
 
So I have this code. I'm doing something wrong. I want the left arrow to go back (show the previous image) but it isn't working. It shows the next image (like the right arrow). Whatever arrow I click, left or right it shows the next image. I've tried millions of different things and I can't seem to find the problem. Can anyone help me?

I also like the sources to loop. When the last source from the array has been reached, I want to loop back to the first source again (and to the last source when you reach the first).

Btw, I also have a code for the image to change on click. I'm pretty sure it has nothing to do with the problem, but I decided to keep it, just in case it's messing something up.

Thank you :)   



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>

解决方案
You were on the right track, but you got a few things wrong:


You have two variables with the same name.
You have two functions with the same name.
If a function expects an argument, you must always send an argument (or null), you can not only send -1 for left, and nothing for right. (And in your case, you're actually making it more difficult for yourself by not sending a 1 for right).
|| imgs[dir ? imgs.length - 1 : 0], doesn't do what you think it does. You're checking dir as if it's a boolean. JavaScript can interpret 1 and -1 as booleans (true and false respectively), but because you only send along -1 it will not work correctly.


Below is your code with these issues fixed:



JS, HTML:



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];
}

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

<div class="container">
  <div id="slideshow"> 
    <img id="imgClickAndChange" src="http://i.stack.imgur.com/NjC6V.jpg" alt="" onclick="changeImage(1)" /> 
  </div>
</div>




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


In the ternary operator, instead of (dir==1) you could just use dir, since JavaScript translates a 1 to true. But using (dir==1) is safer because that will create a real boolean.
I replaced the images in the imgs-array with links to images that actually exist, so that the script works without any errors.
I added some CSS, this is only for the answer's sake, so that all images have the same size.




If you don't want the images to loop, change the changeImage() function to this:
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/)

                        
这篇关于在按键上幻灯片无法正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！