Comment changer entre 3 images avec javascript événement onClick?

J'ai simple code html et Javascript indiqué ci-dessous où image1 s'affiche, et quand on clique dessus, il change de image2. Je vais avoir un problème étendre jusqu'à un tiers de l'image de telle sorte que si image2 est cliqué, il se transforme en image3 et, enfin, si image3 est cliqué qu'il retourne à image1 et le cycle peut être répété une fois de plus. Quelqu'un peut-il me font croire que la meilleure approche est parce que je pense que la façon dont je suis actuellement en train de le faire pour les 2 images ne fonctionnera pas pour ce que j'ai décrit. Grâce

Note:Ceci est un problème que j'ai rencontré pour la préparation aux examens et en tant que tel je ne peux pas utiliser JQuery-JavaScript doit être.

<html> 
<head> 
<script> 
function preloadImages() { 
Image1=new Image(); 
Image1.src = "image1.jpg";
} 

</script> 
</head> 
<body onLoad="preloadImages();"> 
<img name="myButton" src="image2.jpg"
onClick="document.myButton.src='image1.jpg';" 
onClick="document.myButton.src='image2.jpg';"> 
</body> 
</html>
InformationsquelleAutor kellzer | 2014-04-19
  1. 5

    Comment sur les écouteurs d'événement et un tableau d'images qui peut être étendu à n'importe quel numéro de

    <html>

    <head></head>

    <body>
        <img id="myButton" src="image2.jpg" />
        <script type="text/javascript">
            var images = ['image1.jpg', 'image2.jpg', 'image3.jpg'],
                i = 1;

            //preload
            for (var j=images.length; j--;) {
                var img = new Image();
                img.src = images[j];
            }

            //event handler
            document.getElementById('myButton').addEventListener('click', function() {
                this.src = images[i >= images.length - 1 ? i = 0 : ++i];
            }, false);
        </script>
    </body>

</html>

    VIOLON

    • Merci, cela fonctionne parfaitement!
    • Vous êtes les bienvenus !
    • Pourriez-vous expliquer cette ligne de code un peu pour moi, si vous n'avez pas l'esprit. Je vais avoir du mal à comprendre ce qui se passe ici. Merci-désolé, je suis très nouveau pour JavaScript (pas de problème si vous ne l'explique pas-remercie de votre réponse!) Merci. 'ce.src = images[i >= des images.longueur - 1 ? i = 0 : ++i];'
    • C'est un ternaire, un raccourcissement de if/else. Si i est plus le nombre d'images, nous commençons à 0 de nouveau (la première image), sinon nous utilisons i + 1 pour obtenir l'image suivante etc.
    • Merci encore pour votre aide avec ça!
    InformationsquelleAutor adeneo
  2. 0
    <html> 
<head> 
<script> 

var imagesNames = ["Image1.jpg", "Image2.jpg", "Image3.jpg"];

function preloadImages() { 
  for (var i = 0 ; i < imagesNames.length; i++) {
    var img = new Image();
    img.src = imageNames[i];
  }
} 

var imageIndex = 0;
img.onclick = function() {
  imageIndex++;
  if (imageIndex > imagesNames.length) {
    imageIndex = 0;
  }

  document.getElementById("myButton").src = imageNames[imageIndex];
}

</script> 
</head> 
<body onLoad="preloadImages();"> 
<img id="myButton">
</body> 
</html>
    • Légère amélioration, depuis imageNames[imageNames.length] n'existe jamais essayer de changer de imageIndex > imageNames.length à imageIndex >= imageNames.length ou imageIndex > imageNames.length - 1.
    InformationsquelleAutor Jeremy J Starcher
  3. 0

    vous pouvez basculer entre trois classes et de joindre des images différentes, pour toutes les classes pour voir comment basculer entre trois classes de vérifier cette question ici.
    Vous pouvez également utiliser un tableau et de l'affecter src des images au tableau et de l'affecter à votre img à la fois.Espérons que cela aide

    var mylinks = new Array();
mylinks[0] = "abc.jpg";
mylinks[1] = "xyz.jpg";
mylinks[2] = "lmn.jpg";

    d'abord attribuer un dire (var i=0) et vous attribuer mylinks[i] et puis (i=i+1) et attribuer mylinks[i] et de continuer à le faire jusqu'à i> mylinks.length puis démarrez-sur je.e i=0;

    • Merci pour votre réponse j'ai essayé un peu les choses avec des tableaux déjà tellement pourrait donner un autre aller. Je devrais l'ai mentionné dans mon post que c'est pour la préparation d'un examen et je ne peux pas utiliser jQuery-JavaScript. Merci
    InformationsquelleAutor Aameer
  4. 0

    HTML : 

    <img name="myButton" id="myButton" data-img="1" src="image1.jpg" />

    JS: 

    var imgList = ["image1.jpg","image2.jpg", "image3.jpg" ];

var myButton = document.getElementById("myButton");
myButton.onclick = function( e ){
    var elem = e.target,
    imageIndex = parseInt(elem.dataset.img,10);
    if( imageIndex <= (imgList.length -1) ) {
        elem.src = imgList[imageIndex++];
        elem.dataset.img = imageIndex;
    } else {
        elem.src = imgList[0];
        elem.dataset.img = 1;
    }
}

    Violon : http://jsfiddle.net/aslancods/ry6hS/

    InformationsquelleAutor sudhan kantharuban