Bookmark: HemiDemi MyShare Baidu Google Bookmarks Yahoo! My Web Del.icio.us Digg technorati furl Bookmark to:YouPush Bookmark to:你推我報
今天早上花了20分鐘研究了一下如何使用javascript code來自動改寫CSS的內容，如此一來就可以隨機更新我的blog banner了 ^^ 大家可以多試幾次「重新整理 F5」，就清楚了! 以後會慢慢新增一些blog banner在這，不然一直使用別人(樣本)的blog banner也不好，怎麼說自己也是有不少還可以的照片，不用好像太對不起自己了 :P  對這個功能也有興趣的朋友，可以連結到延伸閱讀的那幾篇文章看看就明白了 :)

後記:
我也把程式碼作了一點小更動，原因是要維持每張照片出現的機率均等。例如我現在想製造一個0-3之間的隨機整數，依照Kaie的寫法，出現0的可能是當3*Math.random()計算結果為0-0.4999，而出現1的可能是當3*Math.random()計算結果為0.5-1.499之間，明顯的看來第一張照片(banner[0])的出現機率硬是比第二張(banner[1])的機率小了約一半，同裡最後一張照片的出現機率也會較低一點。所以我把我的計算方式從四捨五入(round)的語法改成無條件捨去(floor)，這樣一來各張出現的機率將更為均等。 :)  。所以其中那句程式碼將改程如下所示，其中4就是表示總共有4張圖片(也就是產生0-3之間的隨機整數)囉!! ^^

var random=Math.floor(4*Math.random());

2007.09.20後記:
另外，也可以把4改成banner.length這個變數(就是變成下面的程式)，這樣一來它就會自動依照banner這個array的長度(個數)作調整，所以以後新增圖片的話，就不用去更動那個數字囉 ^^

var random=Math.floor(banner.length*Math.random());

延伸閱讀:
站內:
* [站務] Blog banners 整理!!!
站外:
* [ blog ] 怎樣讓 banner 可以有換圖的效果  走過的、學過的、看過的
* Kaie's Blog: [Blog] Random Rotating Banner Hack
* Freeyasoul Adventure: Random Rotating Banner Hack
* JavaScript - Wikipedia
* CSS - Wikipedia

Posted by sandor at 痞客邦 PIXNET Comments(27) Trackback(1) Hits(3933)

Shorten Url Recommend to Front page Forward by E-mail Forward to Guestbook

▲top

open trackbacks list Trackbacks (1)

  • #1 by 寫在鬱金香的國度 ::PIXNET BLOG:: at 21 October, 2007 19:06

  • 分享。Banner隨機更新

    我喜歡自己改CSS，改到一個滿意的版面後，就保持一段時間只更新Banner的圖片。前幾天，在<a target=\"_blank\" href=\"http://blog.pixnet.net/sandor/post/8897346\">Sandor的攝

Comments (27)

Post Comment
  • #1 javabn pixnet user on 2007/09/18 00:54

  • 謝謝你對購買dSLRㄉ建議~sandor~
    對ㄌ~請問你這javascript是放在那兒?~一般是放在HTML page~我們好像只能修改CSS?~
  • 不會!!我自己是用canon的，所以我也是把我知道關於nikon的跟你說而已，如果有記錯還請見諒 :P

    我的javascript一律放在PIXNET後台的"網誌描述"那一欄裡面 :)

    sandorreplied on 2007/09/18 01:50

  • #2 Kaie on 2007/09/18 14:25

  • 嗯，您說的有理...Good job...當初我也沒仔細研究，直接轉載過來，翻譯一下..XD
  • 呵呵~大家討論討論囉 :)

    sandorreplied on 2007/09/18 15:32

  • #3 javabn pixnet user on 2007/09/19 23:58

  • 多謝啦~sandor~真是好用~太利害ㄌ~怎麼知道(figured out)放在"網誌描述"理會寫進<body>tag?我放在在CSS試ㄌ幾次都沒用~所以用ㄌ你ㄉ方法~也改成math.floor~works pretty well~thanks a lot!~
  • 呵呵!!因為我之前掛Google Analytics就是把程式碼放在網誌描述裡，所以這次我就直覺把程式碼放在那囉 :)

    sandorreplied on 2007/09/20 00:31

  • #4 birgit1121 pixnet user on 2007/09/21 17:37

  • 真是聰明的設計,難怪我早上看和下午看到的banner圖片不一樣.^^
  • 呵呵~謝謝你的誇獎!我也是從別人那裏學到了一些東西呢 :) 我想每次來都有一些不一樣，這樣一來也比較有新鮮感 :P

    sandorreplied on 2007/09/21 17:48

  • #5 shan816 pixnet user on 2007/09/22 09:45

  • 每一張都好棒唷~忍不住會一直按F5耶XD...

    這個設計很棒呢QQ"
  • 謝謝 :) 這些照片都是精挑細選的呢 :P

    sandorreplied on 2007/09/22 15:01

  • #6 撒旦 on 2007/09/30 00:43

  • 想請教一下，banner圖片寬度要怎樣調整才能將整個畫面都填滿呢？就像您的一樣？如果沒辦法填滿，那更換的時候空白處會滿難看的說......
  • 恩..我是一開始上傳照片前，就先設定好照片的尺寸都是1155x685了~這樣一來應該就不會有你說的那個問題了~你可以試試看囉!! :)

    sandorreplied on 2007/09/30 12:05

  • #7 撒旦 on 2007/10/01 00:07

  • 您指的尺寸，是指照片本身的pix嗎？我先試看看，希望可以成功，謝謝你！
  • 是阿!!我說的就是照片本身的畫素 :) 有問題再來討論討論唄 ^^

    sandorreplied on 2007/10/01 03:33

  • #8 撒旦 on 2007/10/01 04:56

  • 謝謝你啦，已經成功囉！感恩！如果有攝影方面的問題還得向您多請教 :)
  • 我也還在學習中~大家一起討論吧 :)

    sandorreplied on 2007/10/01 08:19

  • #9 撒旦 on 2007/10/07 05:00

  • 我又來了
    這次是有人反應說，他們開我的部落格會因為這個js導致瀏覽器當掉，你這邊也會有這種狀況嗎？
    我自己用火狐或IE開都不會這樣
    不曉得是怎麼回事？
  • 這樣阿~~我自己是沒有遇過這樣的情況耶!! 不過我有幾個想法:
    1. 你確定他的ie是因為這個js當掉的嗎?
    2. 我看你的banner Array有31個element在裡面了，有沒有可能是因為數目太多而當掉? (只是猜測，因為我也不是寫程式也不是我的本科系　XD)

    sandorreplied on 2007/10/07 10:01

  • #10 撒旦 on 2007/10/07 12:22

  • 我近期增加的js只有這項,所以合理懷疑是這個js,但我也有要他們注意當在哪邊了
    數目太多應該不是問題，因為一來我用火狐或IE開都沒事，二來這個js也不是一次讀31張照片，而是亂數找一張來讀取，應該不會造成問題才對
    我是懷疑應該是別的js的問題啦,但這個還得多收集案例才找得出來,真是麻煩 ,唉
    謝謝你啦 :D
  • 您的懷疑當然是有道理的，不過這個還是得再確認，畢竟通常只有含有無限迴圈的js容易讓瀏覽器當掉才對，所以我才會覺得這個js程式應該不會有問題，沒辦法幫上忙，真是不好意思　^^a

    sandorreplied on 2007/10/07 16:05

  • #11 撒旦 on 2007/10/08 12:49

  • 唉呀，這樣就太客氣了
    問題大概找到了，不關banner的事
    很有可能是他們的瀏覽器不支援或對某些flash讀取有問題所致
    還是謝謝你囉 感謝！
  • 了解~問題解決了就好 ^^

    sandorreplied on 2007/10/08 18:31

  • #12 MiriSusanna pixnet user on 2007/10/21 17:53

  • 謝謝你的分享，我也掛上隨機banner了。
  • 不會~~ :)

    sandorreplied on 2007/10/21 22:43

  • #13 kaiwaisheep pixnet user on 2008/01/15 18:22

  • 感溫拉

    sandor大，我研究了兩個晚上終於把自己的blog也掛上隨機banner了
    感謝您寫的這篇教學，向您致上無比的敬意。
    每次上自己的網誌都有新意的感覺真好：）
  • 我有去看過你的blog了 有幾張照片真的拍的還不錯說 :) 另外，如果可以直接把那些banner整理到某個set去的話 我想大家想直接看看你選了那60張照片 會方便的多 ^^a

    ps. 如果想在blog裡面插入Flickr slider show 可以參考下面幾個網址提供的code喔 :)
    http://www.slideoo.com/
    http://www.slideflickr.com/

    sandorreplied on 2008/01/15 22:23

  • #14 kaiwaisheep pixnet user on 2008/01/16 09:09

  • 大大整理到一個set的主意真不錯....有空來試試....
    我沒事幹嘛弄那麼多張阿>___< 搞死自己....
  • 呵呵!!不會拉!!自己開心就好啦!! ^^

    sandorreplied on 2008/01/16 22:27

  • #15 alice7878 pixnet user on 2008/02/01 01:50

  • 沒想到這麼短的語法就有這樣大功效!!
  • 是阿!! 正所謂小兵立大功呢 :P

    sandorreplied on 2008/02/06 22:51

  • #16 dadayo pixnet user on 2008/02/08 13:50

  • 我也用好囉
    好棒的功能
    引用一下您的教學
    感謝大大唷^^
  • okok~引用請自便 :)

    sandorreplied on 2008/02/09 16:22

  • #17 kurumi51244 pixnet user on 2008/03/24 07:32

  • 你好~謝謝你分享這麼棒的語法~
    不過，我有問題想請教一下!!
    請問:如何讓網誌名稱可以跟著圖片一起出現呢?
    因為，我的隨機圖片把名稱給擋住了~

    不好意思~第一次留言就麻煩你~
    但還煩請給我回覆~謝謝~
  • ㄟ...我沒有遇過這樣的狀況耶 ^^a 而且我看不到你的blog 所以也不知道問題可能出在哪裡 不好意思 沒有幫你解決問題 ^^a

    sandorreplied on 2008/03/24 19:37

  • #18 kurumi51244 pixnet user on 2008/03/24 19:57

  • 你好~謝謝你的回覆~
    沒關係~因該是我的語法沒弄好!!
    因為我現在還在試，所以BLOG才沒有打開!!
    我再用用看好了~

    不好意思~麻煩你了~謝謝~
  • 不會拉 ^^a 有什麼問題大家可以再提出來討論討論囉 :)

    sandorreplied on 2008/03/24 20:34

  • #19 華 on 2008/06/22 00:23

  • 您好！
    看到您的這篇文章，很有興趣，
    但我想請問一下，banner和header這兩個位置有什麼不同嗎？
    因為我希望header位置的圖片也能有同樣的效果。
    不知您知不知道有什麼方法嗎？
    謝謝！
  • 我不太清楚你指的header是什麼 ^^a 但我猜我們應該是指同樣的東西吧

    sandorreplied on 2008/06/24 23:46

  • #20 artolive pixnet user on 2008/06/22 14:31

  • 感恩啦

    我是廣告創意人
    但是網路程式語言真的不懂
    想放屬於自己的設計的版面又不知如何編寫程式
    看了你的文章還是覺得好難ㄎㄎㄎ
    不過 認識一個新的板板
    板主有雙細心觀察的眼睛跟獨特的美感造詣
    給你拍拍手^^
  • 程式我也不是很厲害 也是網路上多看看 就多學學囉!!

    我只是用我的方法紀錄看到的東西囉 謝謝你的誇獎拉 :)

    sandorreplied on 2008/06/24 23:55

  • #21 顏滾滾媽 pixnet user on 2008/07/10 11:57

  • 請問如果我要更改版面上方的banner
    我的照片大小尺寸要設定多少呢??^^
  • 下面這個語法就有答案囉!! 只要你照片的高度大於650px,理論上來說瀏覽器會自動幫你等比例縮到高度是650px,但是如果照片的高度小於650px的話,它也會幫你放大到650px,不過這時候可能就會有馬賽克(因為格放的關係)出現囉 !! :) 當然這個數字是可以隨你設定的,如果你不想要像我一樣放這麼大的banner,你就把它縮小一點囉 ~~ :)

    document.write(' #Top{height:650px;background:url("' + banner[random] + '") left top no-repeat;}');

    sandorreplied on 2008/07/10 13:28

  • #22 顏滾滾媽 pixnet user on 2008/07/10 18:41

  • 謝謝你詳細解說
    另外想在請教那banner的寬度呢??
    多少比較適合?
  • 我覺得都ok耶!!看你整個版面的設計阿~~ ^^ (這樣好像沒有回答到你的問題 :P )

    sandorreplied on 2008/07/10 20:21

  • #23 顏滾滾媽 pixnet user on 2008/07/10 23:11

  • 如果想要滿版呢??
    這樣寬度是多少＠＠？
  • 恩..應該這樣說好了..多少的寬度叫做滿版,應該用螢幕的解析度來看,如果你的螢幕是800x600,那你看到一個寬度是800的就叫做滿版囉 :) 有機會的話,使用不同解析度的螢幕看看自己的blog,會是不同的感受的 :P 不知道這樣有沒有回答到你的問題? ^^a

    sandorreplied on 2008/07/11 00:08

  • #24 顏滾滾媽 pixnet user on 2008/07/11 11:18

  • 有~~
    謝謝你的回覆
    我瞭解囉^^
  • :)

    sandorreplied on 2008/07/11 19:19

  • #25 dan pixnet user on 2008/07/26 10:22

  • 請問我已經把語法放在後台的"網誌描述"欄位了，
    不過banner依然跑不出來...
    不曉得是什麼問題呢？
  • ㄟ..我看了一下..你在"網誌描述"欄位的語法應該是都沒有錯誤..所以我想你可能沒有把CSS裡面banner的那一行刪除.. ^^a 你可以試著刪除CSS裡"background:url"的設定.. :)

    sandorreplied on 2008/07/26 14:10

  • #26 dan0722 pixnet user on 2008/07/26 16:53

  • 我把url那一段刪除了還是不行...＝　＝
    如果把整段刪除，連照片的尺寸大小都會跑掉了...
    請問是不是我有漏了什麼地方呢？
  • ㄟ 不用把整段刪除喔~~ 只要把"background:url"那行刪除即可~~ 你再試試看囉!! 如果再不行的話 我在猜可能是模板的關係~~ @@

    sandorreplied on 2008/07/27 01:10

  • #27 Lavinia on 2008/09/04 16:50

  • 您好, 想請問若是使用樂多 blog, 隨機 banner 語法應該是要放在那裡呢 ?
    是放在 CSS 語法裡嗎 ?
  • 哈囉~~我沒有用過樂多,不過我是把我的語法放在blog的描述裡面,給你參考一下囉 :)

    sandorreplied on 2008/09/05 07:26

Comment Permissions: Allow commenting

Leave Comment

*Name/Nickname
E-mail
Personal Website
Comment Title
*Comment
* Private Comment