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

6049 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!

Php8, je viens aussi

Apprenez la mise en page d'un site Web en 30 minutes

Tutoriel vidéo Shangguan Oracle débutant à compétent

Votre première ligne de code UNI-APP

Flutter de zéro au lancement de l'application

Brother Lian Nouveau didacticiel vidéo Linux

Tutoriel vidéo AXURE 9 (convient à l'interface utilisateur interactive de conception de produits du chef de produit)

Tutoriel vidéo PS Zero Basic Proficiency

Tutoriel vidéo de 16 jours sur l'interface utilisateur pour vous aider à démarrer

Tutoriel vidéo sur les techniques PS et les techniques de découpage

Tutoriel vidéo sur la construction et le lancement de projets d'Alibaba Cloud Environment

Présentation des réseaux informatiques - Connaissances de base que les programmeurs doivent maîtriser

Tutoriel essentiel pour les programmeurs - Explication du protocole HTTP

Tutoriel vidéo Websocket

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