Comment obtenir un effet de changement d'image après avoir cliqué sur l'image en js ? (exemple de code)-js tutoriel-php.cn

Comment obtenir un effet de changement d'image après avoir cliqué sur l'image en js ? (exemple de code)

藏色散人

Libérer： 2018-08-15 17:00:45

original

6111 Les gens l'ont consulté

Cet article présente principalement comment obtenir l'effet de clic js pour changer d'image. J'espère que cela aidera les amis dans le besoin.

L'exemple de code d'effet d'image de commutation js est le suivant :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js图片切换特效代码示例</title>
    <style>
        img
 {
            width: 640px;
            height: 214px;
            position: absolute;

        }
    </style>

</head>
<body>
<script>
    var imgArr=[
        "image/a.jpeg",
        "image/b.jpeg",
        "image/c.jpeg",
        "image/d.jpeg",
        "image/e.jpeg"
 ];
 var position=0;
 var imgB=new Image();
    imgB.src=imgArr[1];
    imgB.id="imgB";
    document.body.appendChild(imgB);
    var imgA=new Image();
    imgA.src=imgArr[0];
    imgA.id="imgA";
    document.body.appendChild(imgA);
    imgA.style.opacity=1;
    imgA.addEventListener("click",clickHandler);
    var id=0;
 function clickHandler() {
        imgA.removeEventListener("click",clickHandler);
        id=setInterval(imgOpacity,30);
        setTimeout(changImage,3000)
    }
 function imgOpacity() {
        if(imgA.style.opacity==0){
            clearInterval(id);
            imgA.style.opacity=1;
            if(position+1>4){
                imgB.src=imgArr[0]
            }else{
                imgB.src=imgArr[position+1]
            }

            return;
        }
        imgA.style.opacity-=0.01;
    }
 function changImage() {
        position++;
        if(position>4){
            position=0;
        }
        imgA.src=imgArr[position];
        imgA.addEventListener("click",clickHandler);
    }

</script>
</body>
</html>

Copier après la connexion

étapes de l'idée d'effet d'image de commutation js : Créez d'abord deux nouveaux graphiques, 2 images A , B. A est placé en dernier, donc A est en haut. imgA.style.opacity=1; Cette phrase est très importante Si cette valeur n'est pas définie, la valeur sera 0 lors de l'appel dans la fonction. Nous n'avons écouté que les événements de clic pour imgA.

Lorsque vous cliquez sur l'image du haut, définissez une fonction d'intervalle de temps pour exécuter imgOpacity toutes les 30 millisecondes et définissez une minuterie pour exécuter changeImage après 3 secondes.

Laissez la transparence de l'image A être réduite de 0,01 à chaque exécution, et elle sera exécutée 100 fois, 30*100=3000 millisecondes. L'image deviendra transparente après 3 secondes. Lorsqu'il est transparent, nous effaçons la fonction d'intervalle d'événement clearInterval(id) ; nous effaçons l'intervalle de temps, c'est-à-dire que nous ne l'exécutons plus toutes les 30 millisecondes. Nous réinitialisons sa transparence à 1 et définissons l'adresse de l'image B comme étant l'image suivante.
Lorsque l'on clique sur l'image pendant 3 secondes, la fonction changeImage est exécutée. +1 l'emplacement actuel. Définissez l’adresse de l’image A sur l’image suivante.

Introduction aux points de connaissances pertinents :

la position enregistre la position actuelle de l'image

Ce qui précède est une introduction spécifique à l'effet du clic js pour changer d'image, qui a certain La valeur de référence, j'espère qu'elle sera utile à tout le monde.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!