个性blog之简易相册

      blog园系列的blog网站用得都是一套程序，简洁，实用，速度快，用起来当真一个爽字了得，虽然blog也提供相册功能，却无法在首页展示出来，看了一下帮助，在子标题与公告可以插入代码，一时兴起找了些代码做了这个相册展示栏，效果如下。
imgUrl1 imgUrl2 imgUrl3 imgUrl4 imgUrl5 imgUrl6
      第一步：我们需要添加一个栏目。由于此blog程序无法添加栏目，我们只能在代码里面实现，大家可以看下公告栏的html代码。
    

< div  class  = "listtitle" > 公告 </ div >
     < ul  class  = "list" >
         < li  class  = "listitem" >
                公告内容
        </ li >
</ ul >

进行以下修改即可多出一个栏目来：

< div  class  = "listtitle" > 公告 </ div >
     < ul  class  = "list" >
         < li  class  = "listitem" >
<!-- ------------公告内容处添加开始---- -->
                公告内容
        </ li >
</ ul >
< div  class  = "listtitle" > 相册 </ div >
     < ul  class  = "list" >
         < li  class  = "listitem" >
                相册内容
<!-- -公告内容处添加结束-------------- -->
        </ li >
</ ul >

由于<li>是添加一个圆点，无法让图像居中，所以可以删除相册内容之上的标记或者将标记移到相册内容之下。

      第二步：添加相册展示代码。相册当然是动态的才好看，于是搜到一个“Flash和JS实现的图片幻灯片切换特效”，看了下效果不错。于是借用了下，网址是：http://www.webjx.com/htmldata/2005-10-01/1128143647.html
      不过我实际用起来感觉很麻烦，添加张图片就需要修改好几个地方，于是进行了修改，以下是目前我首页使用的代码，添加在上面的"相册内容处"即可：
   

<select NAME="Lpics" style="display:none">
<option value="http://image2.sina.com.cn/ent/pc/2005-11-01/55/U1513P28T55D4732F936DT20051105235153.jpg" >imgUrl1</option>
<option value="http://image2.sina.com.cn/ent/pc/2005-11-06/55/U1513P28T55D4765F932DT20051106220014.jpg" >imgUrl2</option>
<option value="http://image2.sina.com.cn/ent/pc/2005-11-06/55/U1513P28T55D4765F933DT20051106220014.jpg" >imgUrl3</option>
<option value="http://image2.sina.com.cn/ent/pc/2005-11-06/55/U1513P28T55D4765F934DT20051106220014.jpg" >imgUrl4</option>
<option value="http://image2.sina.com.cn/ent/pc/2005-11-06/55/U1513P28T55D4765F935DT20051106220014.jpg" >imgUrl5</option>
<option value="图片地址" >文本说明</option>
</select>
<a target=_self href="javascript:goUrl()"> 

<!--脚本开始 -->
 <script type="text/javascript">
showpics();
function showpics(){
 var focus_width=192 //相册的宽度
 var focus_height=240 //相册的高度
 var text_height=18  ////相册底部文字的高度
 var swf_height = focus_height+text_height
  var pics="";
 var links="";
 var texts="";
  var Slp = document.getElementsByName("Lpics")(0);
  var Sbp = document.getElementsByName("Bpics")(0);
 if (Slp.options.length>0) {
         for (var i="0"; i< Slp.options.length; i++){
            pics+=Slp.options[i].value;
            links+=escape(Slp.options[i].value);
            texts+=Slp.options[i].text;
            if (i<(Slp.options.length -1)){
                pics+="|";
                links+="|";
                texts+="|";
                 }
         } 
 }
 document.write('<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" width="'+ focus_width +'" height="'+ swf_height +'">');
 document.write('<param name="allowScriptAccess" value="sameDomain"><param name="movie" value="http://www.webjx.com/js/focus.swf"><param name="quality" value="high"><param name="bgcolor" value="#F0F0F0">');
 document.write('<param name="menu" value="false"><param name=wmode value="opaque">');
 document.write('<param name="FlashVars" value="pics='+pics+'&links='+links+'&texts='+texts+'&borderwidth='+focus_width+'&borderheight='+focus_height+'&textheight='+text_height+'">');
 document.write('<embed src="pixviewer.swf" wmode="opaque" FlashVars="pics='+pics+'&links='+links+'&texts='+texts+'&borderwidth='+focus_width+'&borderheight='+focus_height+'&textheight='+text_height+'" menu="false" bgcolor="#F0F0F0" quality="high" width="'+ focus_width +'" height="'+ focus_height +'" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />');  document.write('</object>');
}
</script>
<!--脚本结束 -->
</a>

  这里代码只需要注意几点
 1. 我添加了一个隐藏的select列表，用于添加图片。添加图片时，只需要添加以下代码到select里即可

< option  value ="图片地址"   > 文本说明 </ option >

2 相册高宽控制在脚本注释处
3 如果需要实现展示小图和文本，点击显示大图，则添加一个select name="Bpics"，里面的value存放大图地址，代码中将 "links+=escape(Slp.options[i].value);"    中Slp改为Sbp即可