分享。Banner隨機更新

我喜歡自己改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,給部落格增添新意。

10 thoughts on “分享。Banner隨機更新

  1. birgit

    好實用的語法,謝謝嘍,留著以後用.^^
    版主回覆:(10/21/2007 09:30:38 PM)
    Birgit,不謝唷,好的東西當然要分享給大家。^^

    Reply
  2. herbmint

    這個酷,趕緊留著,有空也要來玩,先謝了。
    你選的這六張圖,我都很喜歡^__^
    版主回覆:(10/21/2007 09:31:33 PM)
    香草薄荷,有空也玩玩看吧。我拍了很多照片,會想把它做成banner的其實也不多,是不是我太龜毛了?哈哈﹗

    Reply
  3. sandor

    這幾張banner也都很優喔!! 🙂
    版主回覆:(10/21/2007 09:33:19 PM)
    Sandor,謝謝你的分享和讚美。這些都是我自己非常喜歡的照片說。

    Reply
  4. HiHello2276

    怪不得這幾天來都發現不一樣
    以前我也喜愛自己改Css
    但發現發的時間好多好多
    必竟不是電腦高手
    所以時間花的就多了
    版主回覆:(10/21/2007 09:37:40 PM)
    以斯帖,我也不是高手,改一次CSS很傷神,有了這個方法可以給網誌換些新意也不錯。

    Reply
  5. angelsmile

    很棒耶! 賞心悅目又有新鮮感
    照片都好美
    謝謝分享,有空也要來玩玩
    版主回覆:(10/23/2007 03:24:48 PM)
    Angelsmile,微笑天使?^^謝謝你的讚美,有空一起來玩玩看。

    Reply
  6. dai

    謝謝您的分享
    我做了八個圖片想來用用看
    結果出不來噎@@
    可以請教您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&quot;);
    background-repeat: no-repeat;
    background-position: 70% 50%; /
    margin-bottom:20px;
    margin-top:0px;
    }
    #banner{height:390px;}

    http://blog.pixnet.net/harpsicello/post/15879910
    版主回覆:(10/26/2007 08:50:20 AM)
    Dai,你好。很抱歉,這我幫不上忙。我的CSS不很內行,我這版本的banner只設定了高度說。#banner{height:170px;}

    Reply
  7. sincerexie

    您好
    謝謝您的分享
    想另外請問
    您blog上的語言選項(google translator)
    單把中文文章翻成英文或簡體的語法是什麼呀??
    謝謝!!
    版主回覆:(04/05/2008 05:37:33 PM)
    Jacky,我使用的翻譯語法是取自Ressol’s Blog:
    http://blog.yam.com/ressol/article/9112018
    你可以過去參考看看~~

    Reply
  8. mandyloveit

    thz 4 sharin!
    it helps me a lot^v^”
    版主回覆:(08/10/2008 05:27:16 PM)
    Mandy,不必客氣~~

    Reply
  9. smilejean

    找這個找很就
    終於被我找到了
    (沒辦法颱風天很無聊,宜蘭沒電視看)
    取用了,感恩

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.