導讀跟大家講解下有關js點擊圖片后怎么實現圖片切換效果？（代碼示例），相信小伙伴們對這個話題應該也很關注吧，現在就為小伙伴們說說js點擊圖
跟大家講解下有關js點擊圖片后怎么實現圖片切換效果？（代碼示例），相信小伙伴們對這個話題應該也很關注吧，現在就為小伙伴們說說js點擊圖片后怎么實現圖片切換效果？（代碼示例），小編也收集到了有關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個圖片A，B。 A是最后放入的，因此，A在最上面。 imgA.style.opacity=1;這句話非常重要，如果沒有設置這個值，當在函數中調用時，該數值是0。我們只給imgA做了偵聽點擊事件。
當點擊最上面的圖片時，設置一個時間間隔函數用來每30毫秒執行一次imgOpacity，又設置一個定時開關，3秒后執行changImage。
讓圖片A的透明度，每次執行減少0.01，執行100次，30*100=3000毫秒。3秒后圖片透明。當它透明時，我們清除這個事件間隔函數 clearInterval(id);清除時間間隔，也就是我們不再沒30毫秒執行一次了。我們重新設置它的透明度為1，并且設置圖片B的地址是下一張圖片。當點擊圖片3秒后，執行changImage該函數。讓當前定位+1。設置圖片A的地址為下一張圖片。
涉及相關知識點介紹：
position 記錄當前的圖片位置
以上所述就是關于實現js點擊切換圖片效果的具體介紹，具有一定的參考價值，希望對大家有所幫助。
以上就是js點擊圖片后怎么實現圖片切換效果？（代碼示例）的詳細內容，更多請關注php中文網其它相關文章！
來源：php中文網
免責聲明：本文由用戶上傳，如有侵權請聯系刪除！