jsを使用して画像をクリックした後に画像切り替え効果を実現するにはどうすればよいですか? (コード例)-jsチュートリアル-php.cn

jsを使用して画像をクリックした後に画像切り替え効果を実現するにはどうすればよいですか? (コード例)

藏色散人

リリース： 2018-08-15 17:00:45

オリジナル

6110 人が閲覧しました

この記事では主にjsをクリックして画像を切り替える効果を実現する方法を紹介します。困っている友達の助けになれば幸いです。

js スイッチング画像エフェクトのコード例は次のとおりです:

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

ログイン後にコピー

js スイッチング画像エフェクトのアイデア手順: まず、2 つの新しいグラフィックス、2 つの画像 A と B を作成します。 A は最後に入力されるため、A が先頭になります。 imgA.style.opacity=1; この文は非常に重要です。この値が設定されていない場合、関数で呼び出されたときの値は 0 になります。 imgA のクリックイベントのみをリッスンしました。

トップ画像をクリックした際に、imgOpacityを30ミリ秒ごとに実行するようにタイムインターバル関数を設定し、3秒後にchangeImageを実行するようにタイマースイッチを設定します。

画像 A を 100 回実行するたびに、透明度が 0.01 ずつ減少します (30*100=3000 ミリ秒)。 3秒後に画像が透明になります。透過的な場合、イベント間隔関数clearInterval(id)をクリアします。つまり、30ミリ秒ごとに実行されなくなります。透明度を 1 にリセットし、イメージ B のアドレスを次のイメージに設定します。
画像を3秒間クリックするとchangeImage関数が実行されます。現在の場所を +1 します。画像Aのアドレスを次の画像に設定します。