輕鬆使用jQuery循環播放影像檔案

顏怡宏 Bob Yen

精誠資訊恆逸教育訓練中心資深講師
技術分類：多媒體

相信很多設計的朋友，都會想要將廣告的內容，或是產品的圖片以定時的方式輪播，而這種功能，卻可以藉由jQuery的便利功能，以短短幾行程式，依照下面的步驟，就能夠輕易解決。

首先只要在<body>區塊中，將要成為輪播的影像<img>標籤塊加上id屬性，並且指定影像來源，
例如設定為：
```
<body>
  <img id="myImg" src="images/photo1.jpg" />
</body>
```

接著在<style>區塊中設定這個<img>影像的CSS外觀屬性

<style type="text/css">
    #myImg{/*此行指定輪播的影像*/
    width:400px; /*此行設定影像的寬度*/
    height:300px; /*此行設定影像的高度*/
    box-shadow:5px 5px 10px black; /*此行設定影像的外框陰影*/
    border-radius:20px; /*此行設定影像的外框圓角*/
    }
</style>

然後先引入jQuery.js這個javascript檔案來使用，可以由jQuery官方網站下載。
https://jquery.com/download
```
<script type="text/javascript" src="jquery.js"></script>
```

最後於<script>標籤中再加入以下javascript程式碼就可以完成了。

<script type="text/javascript">
 var index=1;//設定起始影像號碼
 var photoNum=3;//設定影像總數
 $(document).ready(init);//等待文件讀取完畢後觸發
 function init(){//執行初始化函式
  setInterval(nextImage,5000);//指定每五秒鐘執行換影像函式
  }
  function nextImage(){//換影像函式
    if(index< photoNum){//當索引號碼小於影像總數
      index++;//將照片索引值加１，以取得下一張影像
    }else{
      index=1;//否則將索引值歸回到第一張照片
    };		$("#myImg").attr("src","images/photo"+index+".jpg");
              //將輪播的影像更改影像來源，請注意此範例中，
             //影像名稱必須取名為photo1.jpg, photo2.jpg, photo3.jpg，並以此類推。
  }
</script>

如此就能夠成功的使影像輪播了。

輕鬆使用jQuery循環播放影像檔案

顏怡宏 Bob Yen

相關學習資源