格誤製之黑白舞

關於部落格
格物誌?格物致知?
  • 38636

    累積人氣

  • 1

    今日人氣

    0

    訂閱人氣

曲折的天空部落JavaScript之路part3

funImg.js裡面已經註解得很清楚,直接下載套用就是了

外引funImg.js

<script type="text/JavaScript" src="http://mizuyue.googlepages.com/funImg.js"></script>

只要把src的值改成你傳檔的URL(相對或絕對路徑自行判斷)就好

如果想整行拿去貼,我也不反對啦!

主要是html裡面的屬性與按鈕怎麼設

html設定

<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr align="center">
    <td><a name="1"></a><a href="http://www.flickr.com/photos/44564596@N00/2459843326/" title="Flickr 上 maple8 的 尚志紀念館1"><img src="http://farm3.static.flickr.com/2037/2459843326_ba11b95f76_o.jpg" width="450" height="338" alt="尚志紀念館1" border="0" id="a0" style="display:'block'" /></a>
<a href="http://www.flickr.com/photos/44564596@N00/2459843432/" title="Flickr 上 maple8 的 尚志紀念館2"><img src="http://farm3.static.flickr.com/2214/2459843432_a9dc445bc4_o.jpg" width="450" height="338" alt="尚志紀念館2" border="0" id="a1" style="display:'block'" /></a>
<a href="http://www.flickr.com/photos/44564596@N00/2459843622/" title="Flickr 上 maple8 的 尚志紀念館3"><img src="http://farm3.static.flickr.com/2116/2459843622_f3677b24de_o.jpg" width="450" height="338" alt="尚志紀念館3" border="0" id="a2" style="display:'block'" /></a>
<a href="http://www.flickr.com/photos/44564596@N00/2459843758/" title="Flickr 上 maple8 的 尚志紀念館4"><img src="http://farm4.static.flickr.com/3129/2459843758_e1cdf5b8cd_o.jpg" width="450" height="338" alt="尚志紀念館4" border="0" id="a3" style="display:'block'" /></a>
<a href="http://www.flickr.com/photos/44564596@N00/2459843924/" title="Flickr 上 maple8 的 尚志紀念館5"><img src="http://farm3.static.flickr.com/2018/2459843924_826383864d_o.jpg" width="450" height="338" alt="尚志紀念館5" border="0" id="a4" style="display:'block'" /></a>
</td>
  </tr>
  <tr align="center">
    <td><a href="#1" onclick="changeImg('a',5,-1)">上一張</a>
      / <a href="#1" onclick="changeImg('a',5,1)">下一張</a>[<a href="#1" onclick=playImg('a',5,1) id="a_btm">播放</a>]</td>
  </tr>
  <tr align="center">
    <td><a name="2"></a><a href="http://www.flickr.com/photos/44564596@N00/2463214747/" title="Flickr 上 maple8 的 水中花1"><img src="http://farm4.static.flickr.com/3243/2463214747_e93770f9f9_o.jpg" width="450" height="338" alt="水中花1" border="0" id="b0" style="display:'block'" /></a>
<a href="http://www.flickr.com/photos/44564596@N00/2464047678/" title="Flickr 上 maple8 的 水中花2"><img src="http://farm3.static.flickr.com/2195/2464047678_f8ccdc5d41_o.jpg" width="450" height="338" alt="水中花2" border="0" id="b1" style="display:'block'" /></a>
<a href="http://www.flickr.com/photos/44564596@N00/2464047756/" title="Flickr 上 maple8 的 水中花3"><img src="http://farm3.static.flickr.com/2078/2464047756_ce5223dd70_o.jpg" width="450" height="338" alt="水中花3" border="0" id="b2" style="display:'block'" /></a>
<a href="http://www.flickr.com/photos/44564596@N00/2463214979/" title="Flickr 上 maple8 的 水中花4"><img src="http://farm3.static.flickr.com/2381/2463214979_b91dd36301_o.jpg" width="450" height="338" alt="水中花4" border="0" id="b3" style="display:'block'" /></a>
<a href="http://www.flickr.com/photos/44564596@N00/2463215061/" title="Flickr 上 maple8 的 水中花5"><img src="http://farm3.static.flickr.com/2182/2463215061_dc7cd2d7da_o.jpg" width="450" height="338" alt="水中花5" border="0" id="b4" style="display:'block'" /></a>
</td>
  </tr>
  <tr align="center">
    <td><a href="#2" onClick="changeImg('b',5,-1)">上一張</a>
      / <a href="#2" onClick="changeImg('b',5,1)">下一張</a>[<a href="#2" onclick=playImg('b',5,2) id="b_btm">播放</a>]</td>
  </tr>
</table>

圖片id一定要設

可同時有多組

與最後的效果初始化JavaScript

初始化設定

 <script type="text/JavaScript">
<!--
init("a",5);
init("b",5);
//--
</script>

只顯示第一張圖片,其餘隱藏起來

多組設定就靠"a","b"...""裡面自訂,就是圖組id的開頭,後面接0,1,2,3...

相簿設定
標籤設定
相簿狀態