导航显示 图片一点就变大
技术与开发
我在浏览蓝色理想网站的作品库时，图片展示区的小图导航分页以及大图显示功能很炫目，很吸引我，我想把这种漂亮的图片展示效果应用到我的网站里面，不知道应该怎么设计？
要想把这种效果应用到自己的网站，并非难事。我们可以将图片展示区分为小图导航、大图显示两个区域，同时在小图导航区中加入向前、向后换页按钮。首先我们需要在图片展示区加入一个层，在这个层上部添加两个小图导航表格（演示代码分两页，所以需要加两个导航表格），下部添加一个大图显示表格，最后设计换页及点击小图就变成大图功能。利用相似原理，我们还可以制作图文并茂的课件。
第一步：设计导航表格
我们在＜body＞＜/body＞标签中添加导航表格的代码，演示代码中导航分为两页，因此需要添加两个导航表格。如果需要更多页，可自行设计添加，以下是关键代码（完整代码下载地址：http://www.cpcw.com/bzsoft）：
＜table cellpadding="0" cellspacing="0" class="s-0 slide"＞/*第一页导航CSS设置为s-0，因为CSS中p-0 s-0为显示，所以第一页导航默认为显示*/
＜tr＞＜td width="18" ＞＜img src="images/slide_prev_disable.gif" alt=""/＞＜/td＞/*向前按钮，因为第一页前面没有，所以为灰色图*/
＜td width="644" style="over-flow:hidden;text-align:center"＞/*小图导航单元格，宽度自设，style为居中*/
＜a href="images/1.jpg" onclick="disp('1');return false;"＞＜img src="images/1_t.jpg" alt="" /＞＜/a＞/*第一张导航图，单击调用disp自定义函数*/
＜a href="images/2.jpg" onclick="disp('2');return false;"＞＜img src="images/2_t.jpg" alt="" /＞＜/a＞
＜a href="images/3.jpg" onclick="disp('3');return false;"＞＜img src="images/3_t.jpg" alt="" /＞＜/a＞
＜a href="images/4.jpg" onclick="disp('4');return false;"＞＜img src="images/4_t.jpg" alt="" /＞＜/a＞
＜a href="images/5.jpg" onclick="disp('5');return false;"＞＜img src="images/5_t.jpg" alt="" /＞＜/a＞
＜a href="images/6.jpg" onclick="disp('6');return false;"＞＜img src="images/6_t.jpg" alt="" /＞＜/a＞
＜/td＞
＜td width="18"＞＜a href="JavaScript:;" onclick="$('slide').className='p-1'"＞＜img class="arrow" src="images/slide_next.gif" alt=""/＞＜/a＞＜/td＞/*向后按钮，点击调用prototype.js中$函数获取元素ID，将slide层CSS设置为p-1*/
＜/tr＞
＜/table＞
＜table cellpadding="0" cellspacing="0" class="s-1 slide" ＞/*第二页导航，CSS设置为s-1，默认不显示*/
＜tr＞
＜td width="18" ＞＜a href="JavaScript:;" onclick="$('slide').className='p-0'"＞＜img class="arrow" src="images/slide_prev.gif" alt=""/＞＜/a＞＜/td＞/*向前按钮，点击调用$函数将导航层CSS设为p-0*/
＜td width="644" style="over-flow:hidden;text-align:center" ＞＜a href="images/7.jpg" onclick="disp('7');return false;"＞＜img src="images/7_t.jpg" alt=""/＞＜/a＞＜a href="images/8.jpg" onclick="disp('8');return false;"＞＜img src="images/8_t.jpg" alt="" /＞＜/a＞＜/td＞
＜td width="18"＞
＜img src="images/slide_next_disable.gif" alt=""/＞/*因为只有两页，所以此处为灰色按钮*/
＜/td＞
＜/tr＞
＜/table＞
第二步：添加大图显示区
小图导航表格已经有了，接着在导航代码的下方添加大图显示区代码：
＜table class="bigbox" height="400"＞
＜tr＞＜td id="imgdescription" align="left" valign="top"＞＜/td＞＜/tr＞/*imgdescription是图片介绍区，名称可自行更换*/
＜tr＞＜td id="imgdisp" ＞＜/td＞＜/tr＞/*imgdisp是图片展示区，名称可自行更换*/
＜/table＞
第三步：实现大图、小图联动
小图导航及大图显示区已经设计完成，还需要将小图和大图匹配起来。紧接着在第二步添加的代码后输入相关代码，其中关键代码如下所示（完整代码下载地址：http://www.cpcw.com/bzsoft）：
var attachments=new Array();/*定义图片数组*/
var page=2/*定义页数，展示效果代码为两页，可自行修改*/
attachments['1']=(['images/1_m.jpg','images/1.jpg','哇！好漂亮的图'])/*定义第一张图，数组中第一项为压缩过的图，便于展示，第二项为原图，需要点击之后打开，第三项为文字说明*/
attachments['2']=(['images/2_m.jpg','images/2.jpg',''])
attachments['3']=(['images/3_m.jpg','images/3.jpg',''])
attachments['4']=(['images/4_m.jpg','images/4.jpg',''])
attachments['5']=(['','images/5.jpg',''])/*定义第五张图，只显示原图*/
attachments['6']=(['images/6_m.jpg','images/6.jpg',''])
attachments['7']=(['','images/7.jpg',''])
attachments['8']=(['images/8_m.jpg','images/8.jpg',''])
function disp（id）{/*定义disp函数*/
$（'imgdescription'）.innerHTML=(attachments[id][2])?('＜div＜br＞class="description"＞ '+attachments[id][2]+'＜/div＞'):'' /*调用$函数显示图片说明*/
if(!attachments[id][0]){
$('imgdisp').innerHTML='＜a＞＜img src="'+attachments[id][1]+'" alt="" /＞＜/a＞'/*直接展示原图*/
}else{
$('imgdisp').innerHTML='＜div＞＜a href="'+attachments[id][1]+'"target="_blank"＞＜img src="'+attachments[id][0]+'"alt=""/＞＜/a＞＜/div＞'/*图片数组有压缩图，所以加入链接*/
}
}
disp('1')/*默认显示第一张图*/
第四步：利用CSS调控分页导航
页面显示部分全部设计完成，可当我们测试时，会发现两页小图导航表格全部显示出来了，这是什么原因呢？不要急，我们还需要在＜head＞区加上用于调控分页导航的CSS代码，其中关键代码如下所示（完整代码下载地址：http://www.cpcw.com/bzsoft）：
.s-0 {
DISPLAY: none
}/*设置第一页导航为不显示*/
.s-1 {
DISPLAY: none
}/*设置第二页导航为不显示*/
.p-0 .s-0 {
DISPLAY: block
}/*当层css为p-0，导航表格css为s-0，第一页导航显示*/
.p-1 .s-1 {
DISPLAY: block
}/*当层css为p-1，导航表格css为s-1，第二页导航显示*/
总结
这种图片展示效果，既具有分页功能，又具有图片导航效果，当然代码还可以改进，可以将Table换成Div来设计结构。我们还可以加入显示FLASH动画的展示功能，可以用来做新闻图片变换，甚至还可以制作出图文并茂的课件。