<div class="row first-row">
<div class="box col-md-2">
<img src="img/image.jpg" class="img-fluid" id="image">
</div>
</div>
3 Réponses :
L'image de vampire ne fait pas partie du tableau des images et vous avez 1 image répétant à l'index 1 et 2
Le code suivant boucle via toutes les trois images de la matrice. Ajoutez l'image de vampire au tableau des images et il commencera également à boucler. P>
$(document).ready(function () {
var currentImage = 0;
$('.box').on('click', function () {
var images=["http://www.themadcatlady.com/wp-content/uploads/2013/11/2013-11-0212.15.22.jpg","http://tailandfur.com/wp-content/uploads/2015/05/Black-Cat-Pictures-12.jpg",
"http://tailandfur.com/wp-content/uploads/2015/05/Black-Cat-Pictures-12.jpg"];
console.log("currentImage", currentImage);
if(currentImage === images.length) currentImage = 0;
console.log("displaying image at " + currentImage);
$('#image').attr("src", images[currentImage]);
currentImage = currentImage + 1;
});
});
Comme cela a été mentionné, vous ne pouvez pas boucler sur la matrice, vous devez incrémenter avec chaque clic.
$(document).ready(function () {
var images = new Array();
images[0] = "http://www.themadcatlady.com/wp-content/uploads/2013/11/2013-11-0212.15.22.jpg"
images[1] = "http://tailandfur.com/wp-content/uploads/2015/05/Black-Cat-Pictures-12.jpg"
images[2] = "http://tailandfur.com/wp-content/uploads/2015/05/Black-Cat-Pictures-12.jpg"
var i = 0;
$('.box').on('click', function () {
$('#image').attr('src', images[i]);
i++;
});
Tout d'abord, les images de vampire dans ne pas partie de la matrice d'images. Deuxièmement, au lieu de boucler à travers l'ensemble de l'ensemble, pourquoi ne trouvez-vous pas l'index de la source actuelle dans la matrice, puis changez simplement l'attribut SRC au tableau suivant et lorsque vous atteignez la fin, définissez l'index actuel sur - 1. Voici le code pour cela.
$(function(){
var images=["http://www.themadcatlady.com/wp-content/uploads/2013/11/2013-11-0212.15.22.jpg","http://tailandfur.com/wp-content/uploads/2015/05/Black-Cat-Pictures-12.jpg",
"http://tailandfur.com/wp-content/uploads/2015/05/Black-Cat-Pictures-12.jpg"];
$('.box').on('click', function () {
var currentIndex = images.indexOf($("#image").attr("src"));
if(currentIndex === images.length - 2){
currentIndex = -1;
}
$("#image").attr("src", images[currentIndex+1]);
});
});
Merci pour la réponse, mais je n'ai que pour marquer un comme valide ... :)
Vous êtes itérant sur toutes les images à chaque clic afin qu'il affichera toujours le dernier dans la liste.
Notez que vous pouvez utiliser empilement pour produire du code runnable ici sur le débordement de pile afin que les gens ne soient pas obligés d'aller à un autre site. En outre, vous bouclez dans un tableau d'images tout en un seul clic, ce qui signifie qu'il finira toujours sur le dernier.
Dupliqué possible de Changer et parcourir des images onclick à JavaScript
Comme il se trouve, sur chaque clic, votre gestionnaire chargera
images.length - 1 différentes sources d'image dans l'image dans une boucle. Cela se produira extrêmement rapide, probablement ne sera probablement pas visible à l'œil nu et entraînera la source d'image visible étant la source d'image finale (c'est-à-dire les images[images.longueur - 1] valeur source).Pour les courses de boucle très vite, l'interface utilisateur ne sera pas mise à jour sur chaque itération. Vous n'obtiendrez que le dernier. Vous devez regarder à l'aide d'une minuterie pour ajuster les images.
Utiliser une minuterie comme un intervalle de temps défini?
J'ai vérifié le dupliqué suggéré, augmenté la valeur I, Var I = i + 1, mais ne fonctionne toujours pas