Afficher une image à partir d'un tableau d'images - Javascript

Comme Diodeus dit, vous êtes en comparant un Image à un HTMLDomObject. Au lieu de comparer leurs .src attribut:

var imgArray = new Array();

imgArray[0] = new Image();
imgArray[0].src = 'images/img/Splash_image1.jpg';

imgArray[1] = new Image();
imgArray[1].src = 'images/img/Splash_image2.jpg';

/* ... more images ... */

imgArray[5] = new Image();
imgArray[5].src = 'images/img/Splash_image6.jpg';

/*------------------------------------*/

function nextImage(element)
{
    var img = document.getElementById(element);

    for(var i = 0; i < imgArray.length;i++)
    {
        if(imgArray[i].src == img.src) //<< check this
        {
            if(i === imgArray.length){
                document.getElementById(element).src = imgArray[0].src;
                break;
            }
            document.getElementById(element).src = imgArray[i+1].src;
            break;
        }
    }
}

Ici est un peu le moyen le plus propre de la mise en œuvre de cette. Cela rend les modifications suivantes:

1. Le code Sèche un peu pour enlever redondant et du code à répétition et des cordes.
2. Le code est plus générique et réutilisable.
3. Nous faisons le cache dans un objet afin qu'il dispose d'une interface et il y a moins de variables globales.
4. Nous comparons .src attributs au lieu de DOM éléments pour le faire fonctionner correctement.

Code:

function imageCache(base, firstNum, lastNum) {
    this.cache = [];
    var img;
    for (var i = firstNum; i <= lastnum; i++) {
        img = new Image();
        img.src = base + i + ".jpg";
        this.cache.push(img);
    }
}

imageCache.prototype.nextImage(id) {
    var element = document.getElementById(id);
    var targetSrc = element.src;
    var cache = this.cache;
    for (var i = 0; i < cache.length; i++) {
        if (cache[i].src) === targetSrc) {
            i++;
            if (i >= cache.length) {
                i = 0;
            }
            element.src = cache[i].src;
            return;
        }
    }
}

//sample usage

var myCache = new imageCache('images/img/Splash_image', 1, 6);
myCache.nextImage("foo");

Certains avantages de cette plus orienté objet et Séché approche:

1. Vous pouvez ajouter plus d'images par juste de créer les images dans les combinaisons de chiffres et de changer une valeur numérique dans le constructeur plutôt que de copier beaucoup plus de lignes de la matrice de déclarations.
2. Vous pouvez utiliser cela plus d'un endroit dans votre application par juste de créer plus d'un imageCache objet.
3. Vous pouvez modifier l'URL de base en changeant une chaîne plutôt que de N chaînes de caractères.
4. Le code est plus petit en taille (en raison de la suppression de code à répétition).
5. Le cache de l'objet peut être facilement étendue pour offrir plus de fonctionnalités, telles que le prénom, sauter, etc...
6. Vous pouvez ajouter de centraliser la gestion des erreurs dans un seul endroit, donc si une image n'existe pas et ne se charge pas correctement, il est automatiquement supprimé du cache.
7. Vous pouvez le réutiliser dans d'autres pages web que vous pouvez développer que de modifier les arguments du constructeur et de ne pas changer la mise en œuvre du code.

P. S. Si vous ne savez pas ce que SEC, c'est "Don't Repeat Yourself" et signifie que vous ne devriez jamais avoir de nombreuses copies de semblable à la recherche de code. Quand vous avez cela, il devrait être réduit en quelque sorte à une boucle ou d'une fonction ou quelque chose qui supprime la nécessité pour les lots de de même à la recherche de copies de code. Le résultat final sera plus petits, généralement plus facile à maintenir et souvent plus réutilisable.

Est là votre problème:

if(imgArray[i] == img)

Vous êtes en comparant un élément de tableau à un objet DOM.