一月15

[部落] Banner圖片隨機變換

2009年 01月15日 , 09:34

野兔部落的上頭版面小更新囉!
主要變更#header的banner圖,利JS跟CSS我改成隨機顯示圖片背景,所以每一次進來FUN攝影Kerwin的野兔部落,都會看到不同的Banner圖我放六個照片上去


其它的照片,就讓你自己來發現吧!

現在來教一下怎麼實現這隨機變換圖片的方法 (此方法為PIXNET
定,其它的BSP要試一下!
)
首先下面的code裡面的
banner[]=””   <=放圖片的網址
例:banner[0]=”http://p4.p.pixnet.net/albums/userpics/4/4/550444/496ecc0a29538.jpg”

加上去後,接著要找到
var random=Math.round(3*Math.random());
這一行
注意那個3,banner[?]裡的數字多少就要改成其數字
這樣大致就完成了!
接著將下面的JS code碼複製起來,貼在公告區內(建議),可以貼在其它的區塊內,不過貼在其它區塊內的話圖片會慢半拍才會出來,所以建議貼在公告區,然後將公告區的狀態改成開啟
<script type="text/javascript">
var banner= new Array()
banner[0]=""
banner[1]=""
banner[2]=""
banner[3]=""
var random=Math.round(3*Math.random());
document.write("<style>");
document.write("#header {");
document.write(' background: url("' + banner[random] + '") no-repeat left
TOP;');
document.write(" }");
document.write("</style>");
</script>

然後到CSS裡,要記得把
#header{

background: ;

           }
裡頭的background: ;刪掉或是用註解,這樣才能正常運作!

當然這裡頭還可能需要注意圖片的大小,跟版面的配置,每個CSS配置都不同,我提供的是一個方法,希望這篇文章對有需要的朋友有用處!



利用E-mail訂閱野兔最新的文章
輸入你的電子郵件地址: 發送者為 FeedBurner
本篇文章引用網址:

引用列表 (0)

目前有 12 個迴響 (訪客:6 篇, 格主:4 篇)

  1. 1
    mini Windows XP Internet Explorer 7.0 says:

    請問無名的話要怎麼使用呢

    我是過很多次都不行

  2. 2
    魏風 Windows Vista Google Chrome 3.0.195.27 says:

    謝啊,這個真的很好用^^
    以前我讓他顯示隨機圖片時都不是在background,所以感覺都不是那麼完美
    現在學習了 😀

  3. 3
    豬小妞 Windows XP Firefox 3.5.5 says:

    昨天我有試這個效果
    不過圖卻跑到右邊= =”
    怪怪的~我就移除沒用了(嗚)失敗…
    改天再研究好了

  4. 4
    宇博 Windows XP Firefox 3.5 says:

    其實使用jQuery框架的話這些都很簡單了,哈哈

  5. 5
    宇博 Windows XP Firefox 3.5 says:

    圖片外鏈使用已達上限,沒圖羅 😯 ….

留下迴響

放心, 您留下的電子郵件不會被公開或散佈。


野兔村 支援 Gravatar 大頭貼,您可於「Gravatar官方網站」免費取得專屬大頭貼。


使用Facebook來留言
blank

无觅相关文章插件,快速提升流量