[部落] Banner圖片隨機變換

野兔部落的上頭版面小更新囉！
主要變更#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配置都不同，我提供的是一個方法，希望這篇文章對有需要的朋友有用處！

野兔

FUN 攝影 Kerwin 的野兔部落

野兔發表在痞客邦留言(35) 人氣(1,897)

32 則留言

cctsai

等待您~ 來教教天空使用者嘛

2009-01-15 17:51

天空的，可能要摸一下，基本上只要改一下內容而已！有空再來試試(沒在用天空，不是很瞭天空的運作)

2009-01-15 17:58

婚攝趴趴

哇...我找這這個找久了真的太感謝你了..回家趕快來玩玩!!

2009-01-15 18:26

這個很有趣呢！使用後有問題可以來問我！

2009-01-15 19:02

小瑪

不錯喔~~~這個我也有弄捏~~~我還想有空的時候, 來再加上一些FLASH效果~~^^

2009-01-15 19:20

我就是看到有人用覺得不用，所以也來弄一個玩玩 flash我也有想過，但不太會作FLASH，所以先做罷囉

2009-01-15 20:08

Amigo

ㄟ...好難懂哦...

2009-01-15 20:37

咦...哪裡不懂？

2009-01-15 21:04

蔚海藍天/河小童

不錯的教學呢:D 很適用!!!

2009-01-15 20:38

在PIXNET想換首頁圖的，這招很快呢！這樣每次來就不會一直看到同樣的照片

2009-01-15 21:05

jonba5

啊~不會

2009-01-15 21:20

妳來搞笑的嗎？

2009-01-15 21:24

我再來研究一下好了,若還是看不懂,再來請教你... 先前我是想把我自己照的樣片放在最上面,但好像是大小的問題,所以照片看起來很怪~ 像你教的這個和更改最上面照片是不是都要進去CSS原始碼編輯那裡做更改呢?

2009-01-15 21:36

我這個方法是用Javs Script 所以圖片要先做好(尺吋要對) 然後把圖片的網址加到banner[0]="" 的雙引號中修改CSS的地方只有 #header{ background: ; } 這部份，其中background:這一行要刪掉或是用/* background: ; */ 註解

2009-01-15 21:44

了解...我有空再來把圖片做好. 謝謝解說^^

2009-01-15 21:55

^^ 加油囉~不會再過來問我！

2009-01-15 22:39

littlesky116

痾... 我是真的不會... 你是怎照相的阿? 超級有成次

2009-01-15 23:14

一開始可能需要拍些簡單的東西，不要拍場景太複雜的，找一些主題明顯，背景單純的來拍，會比較好上手！拍照可能需要多看別人的照片，然後自己想一下別人怎麼拍的最後就是不要讓拍照成為壓力囉~ 要快樂地拍照，重點是不在拍的多美多好，而是拍到的東西有沒有意義！

2009-01-16 09:06

天仙 (Celeste)

=.=|| 害我一直按重整...

2009-01-16 05:15

哈！那都有看到了嗎？好久不見了，歡迎回來囉~

2009-01-16 09:08

B.E.W

哇..好棒喔！我也要來試試...

2009-01-16 11:12

^^，剛看了妳的BLOG版型是屬於一整套的，用這一招的話怕會破壞美感(除非圖片也是同一系列的)

2009-01-16 13:04

Alfie

很實用！下次改版時也來試試。 ^^..

2009-01-16 14:27

這方法簡單又方便，很容易上手呢！

2009-01-16 14:39

喔，謝謝大大.... 那我先記起來..下次換版在用囉！

2009-01-16 16:56

hir818

正在找這個, 您就PO上教學了.. 謝謝!! 對了,您知道有什麼是可以所見即所得的CSS編輯器嗎? tks.

呵，這也是我最近想改一下版面才找來的功能你的所見即所得指的是什麼呢？一般所見即所得工具都是指像word編輯器的功能嵌在網頁裡來做編輯，像是pixnet裡的發表新文章裡的編輯列如果你說的是CSS專用的所見即所得，這我倒是沒聽過了！一般CSS一寫好版面的型也會跟著改變，pixnet裡有提供預覽的功能，還不錯用！

2009-01-16 17:11

J.J.

真是有趣的功能，小小改變就有無窮樂趣，等下來來找我家狗狗的照片試試！謝謝！

2009-01-16 20:08

很不錯的小功能，且很容易上手，如果有問題可以再回來問問野兔^^

2009-01-16 20:28

紐西蘭美女

好棒喔^^ 可是好像比煮美食難~ 等紐西蘭美女研究清楚‧‧‧ 改天再試試~ 謝謝分享^^

2009-01-17 13:07

呵，不會可以來問問野兔^^

2009-01-17 13:27

summer

那請問一下，你的banner，他的size是多大？是只有圖？不含右邊你的blog名稱是嗎？因為我最近申請了一個帳號，但版面一直搞不定，那個banner的尺寸一直不對>_<

2009-01-25 14:26

啊，我沒看到你的留言，太不好意思了每個不同的CSS它的Banner 圖片的 size 都不同初學的話可以先看原來的圖片大小然後把想要放上去的照片裁成跟原本一樣的大小這樣版面通常就不會亂掉了！真的很不好意思現在才看到留言= =|||

2009-02-13 21:06

小魚吐泡泡

真的不會...哈

2009-02-03 13:12

妳的版型不太適合這方法(怕會破壞BLOG畫面) ^^ 妳的玫瑰就很美了呀！

2009-02-03 19:16

davy

啊這個變換Banner的方法被我找到了耶 (大心) 我想我得花一點時間摸索看看了... 謝謝分享XD

2009-02-10 15:58

有問題再回來問問野兔吧

2009-02-10 19:03

drivemengman

那語法是放進#header{ }裡面是任何地方嗎？我有把background: ;那行刪掉但我用卻沒有出現圖片說圖片要改是要改什麼？

2009-02-13 20:16

程式碼有放到公告區內嗎？(或是其它的側邊欄位)，如果放在公告區要記得把公告打開。 #header{ } 裡的 background: ; 刪掉，這樣應該就可以了有問題再回來問問野兔，我會去過去看一下你有沒有弄錯

2009-02-13 20:21

很抱歉..因為昨天才從無名搬到痞客邦不太懂，公告區是指哪？要怎開放呢？感謝

2009-02-13 20:45

歡迎加入PIXNET 公告的設定首先到pixnet後台管理→側邊欄位設定應該就可以看到公告區塊了，然後點公告區塊下的設定，就可以在裡面操作加入PIXNET還可以再加入部落軌道唷！ http://hare48.pixnet.net/blog/post/25101375 來這裡看看吧！對人氣的提升蠻有用的申請網址 http://www.blog-orbit.com/refer.php?id=hare48

2009-02-13 20:58

我成功了！謝謝

2009-02-13 21:07

恭喜唷！^^

2009-02-13 21:09

cake1020

改成功了^^!謝謝你喔.... 不過想請問一下，為什麼圖片會比較短呢？

2009-03-28 05:57

我也在研究為什麼會變短? 妳的header先改成下面這樣 #header{ height:210px; background-position: 1px 1px; padding:1px; margin-bottom:1px; } 接著在banner h2 裡加入「 height:55px; 」，這樣右邊那個圖的高度就會正常了 #banner h2{ width:345px; height:55px; } 然後找到#content 把內容改成下面這樣 #content{ width:608px ; float:left ; background:#DDD ; padding:0px ; color: #000; *margin-left: 187px !important; margin-left: 188px ; *margin-left: 95px ; word-wrap : break-word; } 至於變短的問題等妳上面改好後我再研究一下

2009-03-28 08:42

我把上面你說的那三個步驟，全都貼到ccs裡了，但是發現好像沒有任何變化耶～

2009-03-29 01:11

呵，有很多些許的變化，上面三個是修正原本的CSS錯誤，改好後IE6才能顯示正確的網頁接下來妳把那個banner的圖檔改成 646px╳210px 的大小，或是寬為646px，應該就OK了

2009-03-29 08:21

改完了，但好像變更短了＠＠

2009-03-29 11:04

妳把那個banner的圖檔改成 646px╳210px 的大小，或是寬為646px 因為妳那圖的寬是600px所以會短

2009-03-29 18:46

我又來麻煩你了，我查了EXIF的資訊。圖片大小確定已經改成646*210了，不是600耶~

2009-03-29 19:02

咦？這張圖嘛！ http://p8.p.pixnet.net/albums/userpics/8/7/1730487/49cee156a5b1e.jpg 我看到的是600x195

2009-03-29 19:06

請問一下我看了原始檔案，確定是646*210，但是為什麼上傳到PIXNET就改變了？要怎麼傳才能不改變呢？

先到相簿後台的基本／進階設定，上傳與縮圖設定，上傳時保留原始尺寸相片改成「是」

2009-03-29 19:14

我已經改成”是”了，上傳後檔案還是一樣耶～>.< 問到都快不好意思了，等等有問題我用會客室問好了，才不會全變成我的留言（羞）

2009-03-29 19:25

呵，那我也用妳家的會客室

2009-03-29 21:59

我終於成功了>"< 原來找到圖片點進去，還要再點一次讓他變大。

2009-03-30 00:58

嗯嗯，因為我也忘了這一點看到妳的BLOG文內的圖大小，還以為是別問題...

2009-03-30 09:45

hiw1210

您好,感謝您分享的方法,我試過了,也沒問題! 我想再請問一下,圖片的部份可以用FLASH嗎?(我已上傳至網頁,可以取得 .SWF檔) 我試過,但不會秀出來耶,要怎麼用ㄚ? Thanks so much!!

2009-12-06 11:39

這方法不適用flash檔唷！

2009-12-06 19:18

小J

請問，跟著時間變化的話該怎麼做？比如說早上這個banner，晚上又另一個banner，這兩個banner互換這該怎麼寫@@ 謝謝

2010-10-03 21:36

Hugo Kung

您好我還是不太懂! ...變換照片需要安裝什麼程式? 若是直接在部落格首頁按右鍵顯示原始碼內可以改嗎?

2012-12-23 00:03

FUN 攝影 Kerwin 的野兔部落

拍照記錄生活,就是FUN攝影　．　簡單生活,輕鬆自在
http://hares.tw 訂閱野兔