欢迎来到飞鸟慕鱼博客,开始您的技术之旅!
当前位置: 首页知识笔记正文

个性化博客简易相册

墨初 知识笔记 36阅读

系列的博客网站都使用一套程序,简洁、实用、快捷。这真的是一个很酷的词。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实现的图片幻灯片切换特效”,看了下效果不错。于是借用了下,网址是:
      不过我实际用起来感觉很麻烦,添加张图片就需要修改好几个地方,于是进行了修改,以下是目前我首页使用的代码,添加在上面的"相册内容处"即可:
   


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

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

标签:
声明:无特别说明,转载请标明本文来源!