Image Tableau et touches fléchées

Question

J'essaie juste de me faire une idée de javascript, et c'est un script que j'ai assemblé à partir de diverses sources, juste assez simple pour que je puisse comprendre au niveau où il se trouve. S'il vous plaît ne faites que si vous je vous serais reconnaissant de petite explication et ne vous attendez pas à savoir soyez pas trop complexe, ...

<script type="text/javascript" language="JavaScript"> 
imgs=Array("01.jpg","02.jpg","03.jpg","04.jpg","05.jpg"); 
var x=0; 
document.onkeydown = checkKey; 
function checkKey(e) { 
    e = e || window.event; 
    if (e.keyCode == '37') { 
     document.getElementById("myImage").src=imgs[--x]; 
    } 
    else if (e.keyCode == '39') { 
     document.getElementById("myImage").src=imgs[++x]; 
    } 
} 
</script> 

et dans le corps ...

<img id="myImage" src="01.jpg" style="width:100%"> 

Qu'est-ce que il est censé faire est de faire une simple galerie d'images d'images qui correspondent à la largeur de l'écran, qui peut être navigué à partir des images dans le tableau en utilisant les touches fléchées. Cela fonctionne bien, pour moi au moins, excepté le fait que si j'essaie d'aller à l'image précédente alors que x = 0, ou l'image suivante de x = 4, elle s'étend indéfiniment, ne revenant pas à 01.jpg de 05. jpg et vice versa comme je le veux. Ma théorie n'a pas fonctionné. Je connais juste des bribes à ce sujet. Quelqu'un sait-il un moyen facile avec la moindre modification à ce script original?

Il n'a pas besoin d'être professionnel ou "joli". Je m'ennuie et j'expérimente. Peut-être des aspirations futures à être un concepteur de sites Web, mais pas pour l'instant certainement: D Oh, et s'il vous plaît pas de référencement JQuery? Bien sûr, ils fonctionnent, mais je veux juste comprendre une solution à ce niveau de base, et obtenir un script autonome.

Answer 1

Je pense que cela devrait faire l'affaire:

<script type="text/javascript" language="JavaScript"> 
imgs=Array("01.jpg","02.jpg","03.jpg","04.jpg","05.jpg"); 
var number_of_images = imgs.length 
var x=0; 
document.onkeydown = checkKey; 
function checkKey(e) { 
    e = e || window.event; 
    if (e.keyCode == '37') { 
     if (x == 0) 
      x = number_of_images - 1; 
     else 
      x--; 
    } 
    else if (e.keyCode == '39') { 
     if (x == (number_of_images - 1)) 
      x = 0; 
     else 
      x++; 
    } 
    document.getElementById("myImage").src=imgs[x]; 
} 
</script> 

Answer 2

Vérifiez si x == 0 ou x == imgs.length - 1 dans votre code et ajuster en conséquence:

function checkKey(e) { 
    e = e || window.event; 
    if (e.keyCode == '37') { 
     if (x == 0) x = imgs.length 
     document.getElementById("myImage").src=imgs[--x]; 
    } 
    else if (e.keyCode == '39') { 
     if (x == imgs.length - 1) x = -1 
     document.getElementById("myImage").src=imgs[++x]; 
    } 
} 

Alors décrémentation (x--) dans le premier cas vous mettre au dernier index, et l'incrémentation (++x) dans le second cas vous mettra à 0, alias le premier index.

Answer 3

<script type="text/javascript" language="JavaScript"> 
imgs=Array("01.jpg","02.jpg","03.jpg","04.jpg","05.jpg"); 
console.log(imgs.length); 
var x=0; 
document.onkeydown = checkKey; 
function checkKey(e) { 
    e = e || window.event; 
    if (e.keyCode == '37') {   
     x--; 
     if(x == -1){ x = imgs.length - 1; console.log('a max'); } 
     //document.getElementById("myImage").src=imgs[x]; 
     console.log('a '+x); 

    } 
    else if (e.keyCode == '39') {  
     x++; 
     if(x == imgs.length){ x = 0; console.log('b max'); } 
     //document.getElementById("myImage").src=imgs[x]; 
     console.log('b '+x);  
    } 
} 
</script> 

MÊME CHOSE QUE PLUS PETIT (1 ligne)

i=Array("01.jpg","02.jpg","03.jpg","04.jpg","05.jpg");var x=0;document.onkeydown=checkKey;function checkKey(e){e=e||window.event;if(e.keyCode=='37'){x--;if(x==-1){x=i.length-1;}document.getElementById("myImage").src=i[x];}else if(e.keyCode=='39'){x++;if(x==i.length){x=0;}document.getElementById("myImage").src=i[x];}}