# jQuery 經典輪播廣告 setInterval

###### tags: `jQuery` `JavaScript`

---
使用JS的setInterval製作

### 公式setInterval
javascript的部分

<script>
    $(function(){
        setInterval(ad,2000);    //計時器 2000毫秒跑一次function ad()
    });

    var adplay = 0;	//宣告變數adplay=0 用來製作輪播的圖片順序
    var adimg;

    //宣告陣列內容
    arrayadimg = new Array("TAKA_1.jpg","TAKA_2.jpg","TAKA_3.jpg","TAKA_4.jpg","TAKA_5.jpg","TAKA_6.jpg","TAKA_7.jpg","TAKA_8.jpg","TAKA_9.jpg","TAKA_10.jpg");  

    //首先執行adplay+1，如果adplay大於9執行adplay=0
    function ad (){
        adplay ++;
        if(adplay >9){
            adplay = 0;
        }
        adimg = "../B.個人/圖片/TAKA/" + arrayadimg[adplay];		//宣告adimg是圖片路徑
        $("#adimg").attr("src",adimg);		//指定HTMLid #aimg 置換sre路徑成adimg
    };
</script>

Body的部分

<div class="adphotoframe">
    <img src="../B.個人/圖片/TAKA/TAKA_1.jpg" alt="" width="200px" id="adimg">
    <p id="ptext">濟南報告至今緊急這就</p>
</div>

顯示如下:

---

## 獨立JS檔案

---
<style>
h2 {
color: #2383F8;
}
h3 {
color: #1AA340;
}
h4 {
color: white;
background-color: #2383F8;
padding:8px;
}

.code1 {
padding: 2px 4px;
font-size: 90%;
color: #c7254e;
background-color: #f9f2f4;
border-radius: 4px;
font-family:'Fira Code';
}
.code {
padding: 2px 4px;
font-size: 90%;
font-family:'Fira Code';
}
</style>