用Javascript仿博客多幅图片自动分页功能

发布:Jack | 发布时间: 2010-06-12

很多时候，我们都会在一些网站上看到，对于有多幅图片的网页处理，较好的处理方式不是将所有的图片一个一个从上至下排列出来，因为，这样会产生几个不好的原因：一是图片多，使得网页加载速度极慢；二是图片太多，导致怎么页面拉得太长，不是一种很好的编码习惯；三是不利于美观，也不好管理。

因此，我们时常需要把有很多图片的网页显示成列表的方式，加载时只加载一张，然后通过列表用户自由选择，如下图：

由此可以看得出，这样的显示方式不仅美观好看，更能够节约服务器资源，节省用户时间。

但是，z-blog乃至其他的博客程序，并没有这样的功能，而且这方面的插件也不容易找到，不得已还是自己来想办法解决吧！因此，为了不让页面每次重新加载，不把一篇博客分解成几篇，所以，用JS即可实现上述功能。且效果还不错，可能唯一的缺点是有点影响搜索引擎的收录，必须给的不是链接，而是执行的js代码。

首先，要先在插件里安装一个相册插件，这样是方便管理自己上传的图片，如果不安装相册插件的话，也是可以的，只是图片多了，管理起来就不太方便。

然后，在发布的文章中创建显示图片的img标签，而且这也是第一次加载时要显示的图片：

设置图片居中显示，设置第一张图片的地址，然后再设置后面的列表项，用户点击一次，就要改变一次图片，而且相应的序号属性也改变一样，便于用户辩认。

function changeimg(imgUrl,id)
{
//将图片的地址改为下一张的图片地址。
document.getElementById("imgID").src="../PLUGIN/WindsPhoto/photofile/"+imgUrl;
//以span标签标注序号，便于区分，先将所有的span属性都改为一样。
var obj=document.getElementsByTagName("span");
for(i=0;i<obj.length;i++)
{
obj[i].style.color="#4272DB";
obj[i].style.fontWeight="normal";
}
//然后将选中的序号加粗着色，便于用户辨认。
document.getElementById(id).style.color="#000000";
document.getElementById(id).style.fontWeight="bold";
}

解释一下上面的代码，上面一段JS代码是用来控制选中的序号进行图片改变，序号本身的样式改变。而上面文本框中的代码，则是和内容一起的结合JS执行的调用代码，有多少张图片就设置多少个序号，每个序号对应一张图片。如果图片太多，可能无法看清楚，可以使用一些工具进行自动生成上面的代码。

将上面的js代码放置在z-blog的script/common.js里面，其他博客或是网页程序可以放置在当前页能够掉用到的js文件里，或者自己重新写一个js文件，再在页面中调用。而上面文本框中的内容则要放置在发布博文的内容框的源代码中。然后，再将下面的一段控制显示样式的css代码放置在你博客选用的css文件里，或者自己写一个css再调用它。

a.changeimage
{
font-family:Verdana, Geneva, sans-serif;
font-size:14px;
text-decoration:none;
color:#4272DB;
}
a.changeimage:hover
{
font-family:Verdana, Geneva, sans-serif;
font-size:14px;
text-decoration:underline;
color:#4272DB;
}
.imglist
{
margin:0 auto;
text-align:center;
}