![[部落] Banner圖片隨機變換](http://hares.tw/wp-content/uploads/2017/12/cropped-9P7A2404-1.jpg)
Posted by 野兔部落的上頭版面小更新囉！
主要變更#header的banner圖，利JS跟CSS我改成隨機顯示圖片背景，所以每一次進來FUN攝影Kerwin的野兔部落，都會看到不同的Banner圖我放六個照片上去
其它的照片，就讓你自己來發現吧！
現在來教一下怎麼實現這隨機變換圖片的方法 (此方法為PIXNET限
定，其它的BSP要試一下！)
首先下面的code裡面的
banner[]=”” <=放圖片的網址
例：banner[0]=”https://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配置都不同，我提供的是一個方法，希望這篇文章對有需要的朋友有用處！
請問無名的話要怎麼使用呢
我是過很多次都不行
無名不支援JS語法，所以是不能使用的
謝啊，這個真的很好用^^
以前我讓他顯示隨機圖片時都不是在background，所以感覺都不是那麼完美
現在學習了 😀
@魏風：
呵，這是在pixnet發的文，轉來WP好像怪怪的
可以到http://hare48.pixnet.net/blog/post/25350889，原始的文章看看
昨天我有試這個效果
不過圖卻跑到右邊= =”
怪怪的~我就移除沒用了(嗚)失敗…
改天再研究好了
@豬小妞：
應該只是CSS控制的問題，看一下控制位置的語法吧
其實使用jQuery框架的話這些都很簡單了，哈哈
@宇博：
可惜我不會用jQuery
圖片外鏈使用已達上限，沒圖羅 😯 ….
@宇博：
呵，這篇文章是以前在pixnet發的！沒再去改圖檔了