Appuyez sur la flèche gauche et droite pour changer l'image?

J'ai donc ce diaporama simple:

<div class="container">
    <div id="slideshow">
        <img alt="slideshow" src="1.jpg" id="imgClickAndChange" onclick="changeImage()" />
    </div>
</div>

J'ai réussi à faire les images changent lorsque je clique comme ceci: 

<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>

Le problème est que je veux aussi les images de changer quand j'ai appuyer sur la touche droite (pour le lendemain) et flèche gauche (pour revenir en arrière). Comment puis-je faire cela? j'ai essayé d'ajouter un "onkeypress" événement, mais rien ne semble fonctionner. Je suis en train de faire quelque chose de mal. Je suis assez nouveau pour javascript, donc si vous pouvez m'aider ce serait génial. Merci 🙂

OriginalL'auteur Owly | 2014-10-18

  1. 3

    Voir la réponse dans l'action http://jsfiddle.net/7LhLsh7L/ (note pour fiddler: qu'il s'exécute dans l'éditeur lui-même avant d'appuyer sur la flèche(gauche, droite) touches, vous devez donner le focus(cliquez simplement sur le résultat au résultat)

    Voici le balisage et script:

    <div class="container">
    <div id="slideshow">
        <img alt="slideshow" src="http://thumb7.shutterstock.com/photos/thumb_large/253822/156271139.jpg" id="imgClickAndChange" onclick="changeImage()" />
    </div>
</div>
<script>
    var imgs = ["http://thumb7.shutterstock.com/photos/thumb_large/253822/156271139.jpg", "http://thumb9.shutterstock.com/photos/thumb_large/554278/132632972.jpg", "http://thumb7.shutterstock.com/photos/thumb_large/101304/133879079.jpg", "http://thumb101.shutterstock.com/photos/thumb_large/422038/422038,1327874090,3.jpg", "http://thumb1.shutterstock.com/photos/thumb_large/975647/149914934.jpg", "http://thumb9.shutterstock.com/photos/thumb_large/195826/148988282.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') {
            //right -> show next image
            changeImage()
        }
    }
</script>

    Les fonctionnalités de la solution ci-dessus:

    • Si vous cliquez sur l'image, il faudra vous à l'image suivante et le cycle recommence lorsqu'il atteint la dernière image.
    • Pour la flèche de Gauche(<-) il charge l'image précédente et les cycles de répétitions dans le sens inverse lorsque atteint la première image.
    • Flèche vers la droite(->) le comportement est similaire à cliquer.
    Yaay! Elle fonctionne. Merci 🙂 il y a une seule chose, j'aimerais que la flèche gauche pour revenir en arrière et montrer les prev de l'image, mais elle montre l'image suivante ainsi. Que puis-je faire pour corriger cela?
    est-flèche vers la gauche montre pas de précédent de l'image? J'ai vérifié avec ce violon jsfiddle.net/7LhLsh7L/1 en mettant toutes les images ensemble

    OriginalL'auteur Koti Panga

  2. 3

    Ma propre approche du problème, alors que vous avez déjà accepté une réponse serait:

    function imgCycle(e) {
//obviously use your own images here:
var imgs = ['nightlife', 'people', 'sports', 'cats'],
//reference to the img element:
imgElement = document.getElementById('imgClickAndChange'),
//finding the string of the src after the last '/' character:
curImg = imgElement.src.split('/').pop(),
//finding that string from the array of images:
curIndex = imgs.indexOf(curImg),
//initialising the nextIndex variable:
nextIndex;
//if we have a keyCode (therefore we have a keydown or keyup event:
if (e.keyCode) {
//we do different things based on which key was pressed:
switch (e.keyCode) {
//keyCode 37 is the left arrow key:
case 37:
//if the current index is 0 (the first element in the array)
//we next show the last image in the array, at position 'imgs.length - 1'
//otherwise we show the image at the previous index:
nextIndex = curIndex === 0 ? (imgs.length - 1) : curIndex - 1;
break;
//keyCode 39 is the right arrow key:
case 39:
//if curIndex + 1 is equal to the length of the images array,
//we show the first element from the array, otherwise we use the next:
nextIndex = curIndex + 1 === imgs.length ? 0 : curIndex + 1;
break;
}
//if we don't have a keyCode, we check if the event-type (in lowercase)
//is a mousedown:
} else if (e.type.toLowerCase() === 'mousedown') {
//I'm assuming you'd like to advance to the next image, rather
//than regress to the previous (same check as above):
nextIndex = curIndex + 1 === imgs.length ? 0 : curIndex + 1;
}
//setting the src of the image to the relevant URL + the string from the array
//at the 'nextIndex':
imgElement.src = 'http://lorempixel.com/200/200/' + imgs[nextIndex];
}
//binding a mousedown event-handler to the 'img' element:
document.getElementById('imgClickAndChange').addEventListener('mousedown', imgCycle);
//binding the keydown event-handler to the 'body' element:
document.body.addEventListener('keydown', imgCycle);

    JS Fiddle démo.

    Références:

    OriginalL'auteur David Thomas

  3. 2

    Vous pouvez détecter la touche flèche presses de JavaScript et ensuite, fixez chaque touche à un évènement. Cette SORTE de réponse montre comment c'est fait, mais pour l'essentiel:

    document.onkeydown = checkKey;
function checkKey(e) {
e = e || window.event;
if (e.keyCode == '37') {
//left arrow
}
else if (e.keyCode == '39') {
//right arrow
}
}
    J'ai essayé de coller ce <script> et de l'autre, de la "AINSI de répondre" mais ça ne fonctionne pas. Que dois-je faire pour le faire fonctionner? Que dois-je écrire sur le html et dois-je ajouter le var dim à cette fonction?

    OriginalL'auteur Tim