技術標籤：javascript

網頁程式碼

<div>
    <div><img src="img/1.jpeg" alt="" id="tt"></div>
    <div>
        <button onclick="change(this)" id="vla1" value="0">1</button>
        <button onclick="change(this)"
 
 id="vla2" value="1">2</button>
        <button onclick="change(this)" id="vla3" value="2">3</button>
        <button onclick="change(this)" id="vla4" value="3">4</button>
        <button
 
 onclick="change(this)" id="vla5" value="4">5</button>
        <button onclick="change(this)" id="vla6" value="5">6</button>
    </div>

照片切換首先需要一個數組包含多塊照片連結，然後通過setinterval在規定時間內自動切換，使用document.getElemenntById指定修改對應照片的連結，如上看出六張圖片的切換，我們就可以簡單的使用一個引數b，當b<6的時候遞加，每加一次換一張圖片，當=6的時候人，讓他轉為0，切換成第一張圖片

 let a = ["img/1.jpeg", "img/2.jpeg", "img/3.jpeg", "img/4.jpeg", "img/5.jpeg", "img/6.jpeg",]
    let b = 0
   
    function time() {
        b = b + 1
        if (b < 6) {
            document.getElementById('tt').src = a[b]
        } else {
            b = 0
            document.getElementById('tt').src = a[b]
        }
    }

    let int = setInterval("time()", 3000)

接著是按鈕切換，就是單純的點選事件，如上我是設定了六張圖片，如果依次使用相同邏輯的函式繫結重複大量程式碼，我們可以使用this獲取對應的id
注意value獲取得是字串，需要用number轉換為數字

   function change(obj) {
        let c = document.getElementById(obj.id).value
        document.getElementById('tt').src = a[c]
        b = Number(c)
    }

最後就是點選按鈕切換圖片的時候會發現，按鈕切換圖片，但是設定的setInterval一直在自動切換，所以我們需要在按鈕按下時候變化前取消時間函式，然後在變化完成後繼續3s一切換

   function change(obj) {
        int = clearInterval(int)
        let c = document.getElementById(obj.id).value
        document.getElementById('tt').src = a[c]
        b = Number(c)
        int = setInterval("time()", 3000)
    }