Button Click Iterate Through Images

Je suis nouveau sur Javascript et j'essayais de comprendre comment passer d'une image à l'autre. Mon but est de changer le code de l'espace réservé pour l'image dans le HTML, de sorte qu'à chaque clic sur un bouton, il passe à l'image suivante. J'ai trouvé comment changer une image à l'autre (getElementById ("mainImage"). Src = "image2.jpg";) mais je dois pouvoir maintenant arriver à "image3" au clic suivant. Je suppose que je dois utiliser des variables, mais je ne sais pas comment obtenir ce travail ...Button Click Iterate Through Images

Source

2012-06-17 Eric Wolf

Avec quel HTML travaillez-vous? Quelle est la structure de votre DOM? Pouvez-vous montrer ce que vous avez déjà, avec une démo en direct sur [JS Fiddle] (http://jsfiddle.net/), [JS Bin] (http://jsbin.com/), ou similaire? Est-ce que les images/'src's dans le DOM/HTML quelque part, ou dans un tableau dans le JavaScript? –

Vous pouvez ajouter un peu avant var key = 0; vos scripts puis dans votre script pour donner l'action événement click

var image = "image" + key + ".jpg"; 
getElementById("mainImage").src= image; 
if(key == max){ 
key = 0; 
}else{ 
key++; 
}

où le nombre maximum d'images est atteint.

Mais je pense qu'il peut être une solution plus facile et mieux dans jQuery :)

Source

2012-06-17 18:26:43

Qu'est-ce que jQuery, et comment cela serait-il plus facile? –

JQuery est liblary pour js et tout est plus facile. Je vous recommande de l'apprendre :) http://jquery.com/ –

Ceci est probablement la meilleure façon de progresser, même si elle finit par déclarer ces variables globales.

var images = ["image1.jpg", "image2.jpg", "image3.jpg"]; 
var currentImage = 0; //defaults to image1.jpg 

function goNext() { 
    currentImage += 1; 

    //loop back to the first image 
    if(currentImage >= images.length) { 
     currentImage = 0; 
    } 

    document.getElementById("mainImage").src = images[currentImage]; 
}

Ainsi, vous appelez simplement goNext() pour cliquer sur le bouton.

Fondamentalement, ce qui se passe ici est qu'un tableau est une liste d'éléments, dans ce cas des chaînes qui sont une référence à une image quelque part. Vous pouvez extraire un élément du tableau en l'indexant, ce qui revient à dire: donnez-moi le 1er objet. En Javascript, ce serait des images [0].

Source

2012-06-17 18:27:12 Jordan

Button Click Iterate Through Images

Répondre

Questions connexes