Wie erreiche ich einen Bildwechseleffekt, nachdem ich mit js auf das Bild geklickt habe? (Codebeispiel)-js-Tutorial-php.cn

Wie erreiche ich einen Bildwechseleffekt, nachdem ich mit js auf das Bild geklickt habe? (Codebeispiel)

藏色散人

Freigeben： 2018-08-15 17:00:45

Original

6048 Leute haben es durchsucht

In diesem Artikel wird hauptsächlich erläutert, wie Sie den Effekt erzielen, indem Sie js klicken, um Bilder zu wechseln. Ich hoffe, es hilft den Bedürftigen.

js-Switching-Bildeffekt-Codebeispiel lautet wie folgt:

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

Nach dem Login kopieren

js-Switching-Bildeffekt-Ideenschritte: Erstellen Sie zunächst zwei neue Grafiken, 2 Bilder A und B . A wird zuletzt eingefügt, daher steht A ganz oben. imgA.style.opacity=1; Dieser Satz ist sehr wichtig. Wenn dieser Wert nicht festgelegt ist, ist der Wert beim Aufruf in der Funktion. Wir haben nur Klickereignisse für imgA abgehört.

Wenn Sie auf das obere Bild klicken, legen Sie eine Zeitintervallfunktion fest, um imgOpacity alle 30 Millisekunden auszuführen, und stellen Sie einen Timerschalter ein, um changeImage nach 3 Sekunden auszuführen.

Lassen Sie die Transparenz von Bild A bei jeder Ausführung um 0,01 reduzieren und es wird 100 Mal ausgeführt, 30 * 100 = 3000 Millisekunden. Das Bild wird nach 3 Sekunden transparent. Wenn es transparent ist, löschen wir die Ereignisintervallfunktion clearInterval(id); löschen das Zeitintervall, das heißt, wir führen es nicht mehr alle 30 Millisekunden aus. Wir setzen seine Transparenz auf 1 zurück und legen die Adresse von Bild B als nächstes Bild fest.
Wenn das Bild 3 Sekunden lang angeklickt wird, wird die Funktion „changeImage“ ausgeführt. +1 für den aktuellen Standort. Stellen Sie die Adresse von Bild A auf das nächste Bild ein.

Einführung in relevante Wissenspunkte:

Position zeichnet die aktuelle Bildposition auf

Das Obige ist eine spezifische Einführung in den Effekt von js, wenn Sie zum Wechseln von Bildern klicken hat einen bestimmten Referenzwert, ich hoffe, er wird für alle hilfreich sein.

Das obige ist der detaillierte Inhalt vonWie erreiche ich einen Bildwechseleffekt, nachdem ich mit js auf das Bild geklickt habe? (Codebeispiel). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!