系列的博客网站都使用一套程序,简洁、实用、快捷。这真的是一个很酷的词。blog虽然也提供相册功能,但是不能在首页显示。阅读帮助后,您可以在副标题和公告中插入代码。心血来潮找了一些代码来做这个相册显示栏,效果如下。imgurl 1 imgurl 2 imgurl 3 imgurl 4 imgurl 5 imgurl 6第一步:我们需要添加一个列。因为这个博客程序不能添加栏目,所以只能在代码中实现。可以看看公告栏的html代码。Divclass='listtitle '公告/divulclass=' list ' Li class=' listitem '公告内容/li
e="color: rgba(0, 0, 255, 1)">>
</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实现的图片幻灯片切换特效”,看了下效果不错。于是借用了下,网址是:
不过我实际用起来感觉很麻烦,添加张图片就需要修改好几个地方,于是进行了修改,以下是目前我首页使用的代码,添加在上面的"相册内容处"即可:
<select NAME="Lpics" style="display:none">
<option value="" >imgUrl1</option>
<option value="" >imgUrl2</option>
<option value="" >imgUrl3</option>
<option value="" >imgUrl4</option>
<option value="" >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="" width="'+ focus_width +'" height="'+ swf_height +'">');
document.write('<param name="allowScriptAccess" value="sameDomain"><param name="movie" value=""><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="" />'); 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即可