ホームページ > 記事 > ウェブフロントエンド > jsを使用して画像をクリックした後に画像切り替え効果を実現するにはどうすればよいですか? (コード例)
この記事では主に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のアドレスを次の画像に設定します。
関連知識ポイントの紹介:
position は現在の画像の位置を記録します
上記は、js がクリックして画像を切り替える効果についての具体的な紹介であり、一定の参考値があり、皆様のお役に立てれば幸いです。
以上がjsを使用して画像をクリックした後に画像切り替え効果を実現するにはどうすればよいですか? (コード例)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。