下面的範例可以輪撥兩張圖片。
- 程式用法：
<img id='pic1' width='200px' height='200px'
src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpYA549yz9MS8WE3TorQMGpoPgrqOUQYQzr0UHO5GnBgWzJjbXbZ-07pqxAUoNnsZMMHDidRLuHtdnAO9p3Iy26qtMYxQiyOqnPRzWKQfswwUOSPvfJ9sz1ideHxDOcjgbBM32jfo6ixI/s200/shape.jpg' />
<script type='text/javascript'>
// 存放圖檔的陣列
var imgs=[
'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpYA549yz9MS8WE3TorQMGpoPgrqOUQYQzr0UHO5GnBgWzJjbXbZ-07pqxAUoNnsZMMHDidRLuHtdnAO9p3Iy26qtMYxQiyOqnPRzWKQfswwUOSPvfJ9sz1ideHxDOcjgbBM32jfo6ixI/s200/shape.jpg',
'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivOT6VlpCqccVcBn3AC5TvCdcMNaaxWsY2tHGNjsBbM0pwLNluC7thXbYH25PA0pOO3FvSJbXjsPyTZGHnuclU4KVCUtnNXjAl-JlZbn5HKi8V8Qvw-Wc7iIS1BBNP0udeND3W68fljA0o/s200/shape2.JPG'
];
function imgCircle()
{
var o=document.getElementById(pid);
o.src=imgs[imgX++];
if( imgX==imgs.length )
imgX=0;
}
var imgX=0;
var pid;
function startImg()
{
setInterval(imgCircle, 1000);
pid='pic1';
}
</script>
<p><a href='javascript:startImg()'>
點此開始輪撥圖片</a> - 執行結果：
- 範例解說：
- 將第一張圖檔放在 <img > 元素中的 src 屬性中，設定適當的長與寬。id 可以自行訂定。
- 將數張圖檔放在 imgs 這個陣列中。
- javascript 會輪撥 imgs 陣列中的圖檔，間隔 1000 毫秒（千分之一秒）。
- 此範例用到以下元素與方法：IMG 元素, 陣列, getElementById() 方法, Math.floor() 方法, setInterval() 方法。
