javascript - Slideshow on key press not working properly -

javascript - Slideshow on key press not working properly -

so have code. i'm doing wrong. want left arrow go (show previous image) isn't working. shows next image (like right arrow). whatever arrow click, left or right shows next image. i've tried millions of different things , can't seem find problem. can help me?

i sources loop. when lastly source array has been reached, want loop first source 1 time again (and lastly source when reach first).

btw, have code image alter on click. i'm pretty sure has nil problem, decided maintain it, in case it's messing up. give thanks :)

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 on right track, got few things wrong:

you have 2 variables same name. you have 2 functions same name. if function expects argument, must send argument (or null), can not send -1 left, , nil right. (and in case, you're making more hard not sending 1 right). || imgs[dir ? imgs.length - 1 : 0], doesn't think does. you're checking dir if it's boolean. javascript can interpret 1 , -1 booleans (true , false respectively), because send along -1 not work correctly.

below code these issues fixed:

js, html:

class="snippet-code-js lang-js prettyprint-override">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]; } class="snippet-code-css lang-css prettyprint-override">#imgclickandchange { width: 150px; height: 150px; } class="snippet-code-html lang-html prettyprint-override"><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 ternary operator, instead of (dir==1) utilize dir, since javascript translates 1 true. using (dir==1) safer because create real boolean. i replaced images in imgs-array links images exist, script works without errors. i added css, answer's sake, images have same size.

if don't want images loop, alter changeimage() function 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 imgs-array (i.e. if exists) img.src = newsrc; } }

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

javascript html slideshow arrow onkeypress