js點擊圖片後怎麼實現圖片切換效果？（程式碼範例）-js教程-PHP中文網

js點擊圖片後怎麼實現圖片切換效果？（程式碼範例）

藏色散人

發布： 2018-08-15 17:00:45

原創

6101 人瀏覽過

本篇文章主要介紹關於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中文網其他相關文章！