Le diaporama sur la pression des touches ne fonctionne pas correctement

J'ai donc ce code. Je fais quelque chose qui ne va pas. Je veux que la flèche gauche revienne (affiche l'image précédente) mais ça ne fonctionne pas. Il montre l'image suivante (comme la flèche droite). Quelle que soit la flèche, je clique, à gauche ou à droite, la prochaine image. J'ai essayé des millions de choses différentes et je ne peux pas trouver le problème. Quelqu'un peut-il m'aider?

J'aime aussi les sources à boucler. Lorsque la dernière source du tableau a été atteinte, je souhaite revenir à la première source (et à la dernière source lorsque vous atteignez la première).

Btw, j'ai également un code pour que l'image change en cliquant. Je suis sûr que cela n'a rien à voir avec le problème, mais j'ai décidé de le garder, au cas où cela dérangerait quelque chose.
Je vous remercie 🙂

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>

Vous étiez sur la bonne voie, mais vous avez eu quelques problèmes:

Vous avez deux variables portant le même nom.
Vous avez deux fonctions portant le même nom.
Si une fonction attend un argument, vous devez toujours envoyer un argument (ou null ), vous pouvez non seulement envoyer -1 pour la gauche, et rien pour le droit. (Et dans votre cas, vous devenez plus difficile pour vous en n'abandonnant pas un 1 pour le droit).
|| imgs[dir ? imgs.length - 1 : 0] || imgs[dir ? imgs.length - 1 : 0] , ne fait pas ce que vous pensez faire. Vous vérifiez dir comme s'il s'agissait d'un boolean. JavaScript peut interpréter 1 et -1 comme booléens ( true et false respectivement), mais parce que vous n'envoyez que -1 il ne fonctionnera pas correctement.

Voici votre code avec ces problèmes:

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>