我喜歡自己改CSS，改到一個滿意的版面後，就保持一段時間只更新Banner的圖片。前幾天，在Sandor的攝影生活看到了Blog Banner隨機更新的功能，很是心動。這是個以JavaScript復寫CSS內容的方法，JS外行的我就依樣畫葫蘆，花了些時間研究，今早再搞幾幅圖測試，結果成功了。
這Banner隨機更新的JS，我就依照Sandor的做法，掛在「網誌描述」那欄。所用的JS語法是︰
<script type="text/javascript">
var banner= new Array()
banner[0]="圖1連結"
banner[1]="圖2連結"
banner[2]="圖3連結"
banner[3]="圖4連結"
banner[4]="圖5連結"
banner[5]="圖6連結"
var random=Math.round(5*Math.random());
document.write("<style>");
document.write("#header {");
document.write(' background:url("' + banner[random] + '") no-repeat left TOP;');
document.write(" }");
document.write("</style>");
</script>
*5是圖片總數減1，我放六張圖作隨機banner，所以就以隨機整數0到5來控制哪張圖片出現。
這次掛上去的六張banner縮圖如下︰
想看看效果的朋友可以多點幾次重新整理或F5。往後會把更多漂亮的照片做成banner，給部落格增添新意。
這Banner隨機更新的JS，我就依照Sandor的做法，掛在「網誌描述」那欄。所用的JS語法是︰
<script type="text/javascript">
var banner= new Array()
banner[0]="圖1連結"
banner[1]="圖2連結"
banner[2]="圖3連結"
banner[3]="圖4連結"
banner[4]="圖5連結"
banner[5]="圖6連結"
var random=Math.round(5*Math.random());
document.write("<style>");
document.write("#header {");
document.write(' background:url("' + banner[random] + '") no-repeat left TOP;');
document.write(" }");
document.write("</style>");
</script>
*5是圖片總數減1，我放六張圖作隨機banner，所以就以隨機整數0到5來控制哪張圖片出現。
這次掛上去的六張banner縮圖如下︰
想看看效果的朋友可以多點幾次重新整理或F5。往後會把更多漂亮的照片做成banner，給部落格增添新意。
Bookmark:
Recommend to Front page
生活。札記(12)
你選的這六張圖，我都很喜歡^__^
以前我也喜愛自己改Css
但發現發的時間好多好多
必竟不是電腦高手
所以時間花的就多了
照片都好美
謝謝分享，有空也要來玩玩
我做了八個圖片想來用用看
結果出不來噎@@
可以請教您CSS裡面banner的語法怎麼寫嗎？
我目前寫的是不是會干擾這個javascript語法正確出現哩...
#header{
border-bottom: 20px solid #B24145;
border-top: 0px solid #B24145;
background-color: #D8DEBA;
background-image: url("http://p1.p.pixnet.net/albums/userpics/1/2/226912/1206632534.gif");
background-repeat: no-repeat;
background-position: 70% 50%; /
margin-bottom:20px;
margin-top:0px;
}
#banner{height:390px;}
--
http://blog.pixnet.net/harpsicello/post/15879910
請問
您好謝謝您的分享
想另外請問
您blog上的語言選項(google translator)
單把中文文章翻成英文或簡體的語法是什麼呀??
謝謝!!
^^
thz 4 sharin!it helps me a lot^v^''
終於被我找到了
(沒辦法颱風天很無聊，宜蘭沒電視看)
取用了，感恩
Comment Permissions: Allow commenting