论网页幻灯片的技术实现

摘要：本文结合高职计算机网页制作课程的教学，探讨了网页幻灯片的原理及实现方法。使学生或者初学者轻松完成网页幻灯片的技术实现。

关键词：网页幻灯片 原理 算法 程序实现

幻灯片效果的应用是网页设计中突出重点、增强视觉趣味的有效方法。jQuery的流行使得幻灯片的实现变得十分简单，但不适合初学者。笔者结合教学经验，总结了适合初学者的学习方法。

一、网页幻灯片的实现原理

网页幻灯片的制作方式有很多，它们的制作原理并不相同。这里介绍更加简单适合初学者的学习。步骤如下：

1.用DIV标签布局主图与标号图，具体如下图：

2.用CSS样式表控制主图显示动画效果，并控制标号图的选中和未选中两种显示效果。

3.用程序控制在相应的标签处的插入相应的主图，并控制标号图显示效果，使主图与标号图一致。

二、算法设计

1.用CSS布局主图与标号图，并设置主图与标号图显示的滤镜效果以备当图像放入指定标签中的时候即显示相应效果。

2.程序控制在网页中插入div块布局，用来放置主图与标号图，考虑到主图是一幅一幅放入到页面中，所以一开始插入一个空的图像。通过一段循环语句将标号图一次全部插入到相应的标记中；

接下来就是插入主图，这里考虑到主图插入的时机有两处，一次是按顺序插入，一次是当我们点击相应的标号即显示主图所以将这段代码设置成为一个过程方便程序调用。

3.插入主图过程如下：

⑴动画效果前进行装备并且播放动画持续2秒；⑵将准备好的第一张主图赋值给相应的标记块中；⑶使用循环语句将标号图与主图对应的标号突出显示，其他标号图使用滤镜显示40%； ⑷播放动画效果。

4.点击标号图时，要结束当前主图的滤镜效果，并插入标号指定的主图；

⑴当点击标号图时停止播放动画效果，并将点击的标号值作为参数传入；⑵调用插入主图过程。

三、程序实现

知道了网页幻灯片这个问题的工作原理之后，并且获取了解决该问题的语言描述（算法），当用程序实现时只需要将该语言描述用程序语言表达出来即可，具体步骤如下：

1.准备工作

准备网页幻灯片所需素材，这里我们以3副图形进行幻灯效果，所以需要准备3个主图和3个标号图。

2.用CSS布局页面及设置主图和标号图的滤镜效果，代码如下：

.picshow_main { position: relative; width: 250px; height: 250px}

.picshow_main .mainimg { filter: progid:dximagetransform.microsoft.revealTrans(duration=5, transition=18); width: 250px; height: 250px}

.changelabel {position: absolute; bottom: 0px; height: 30px; right: 0px; }

.changelabel img {width:15px; height: 15px}

.changelabel a { border: 1px solid; display: block; float: left; margin-right: 15px; }

a.unlinked { border-color: #555}

a.unlinked:hover img {filter: alpha(opacity=100); opacity: 1.0; -moz-opacity: 1.0}

a.unlinked:hover {border-color: #000}

a.unlinked img { filter: alpha(opacity=40); opacity: 0.4; -moz-opacity: 0.4}

a.linked { border-color: #000}

a.linked:hover {border-color: #000}

img{border:0px}

3.幻灯片主程序，代码如下：

//幻灯片主程序

document.write('');

document.write('');

document.write('');

for ( var i = 0; i < counts; i++) {

document.write('

(i + 1) + '" class="linked" >'); }

document.write('');

changemainimg();

4.插入主图过程，代码如下：

//插入主图前的准备工作//

var counts = 3; //定义要插入的主图//

mainimg1 = new Image(); mainimg1.src = 'images/flower1.jpg';

mainimg2 = new Image(); mainimg2.src = 'images/flower2.jpg';

mainimg3 =new Image(); mainimg3.src = 'images/flower3.jpg';

var labelImg = new Array(); //定义要插入的标号图

labelImg[0] = 'images/label1.gif'; labelImg[1] = 'images/label2.gif'; labelImg[2] = 'images/label3.gif';

var nn = 1; var key = 0;

function changemainimg() { //定义第一个子过程，插入主图.//

if (key = 0) { key = 1; }

else if (document.all) {

document.getElementById("pic").filters[0].Apply(); //动画效果前进行装备

document.getElementById("pic").filters[0].Play(duration = 2);//播放动画持续2秒// }

eval('document.getElementById("pic").src=mainimg' + nn + '.src');//通过赋值语句插入图像//

for ( var i = 1; i

document.getElementById("linked"+nn).className = 'linked';

nn++; if (nn>counts) { nn = 1;}

startAE=setTimeout('changemainimg( )', 3000);}

5.定义子过程，当点击标号时，结束当前显示特效，重新装载标号指定主图。

function linkedimg(n){nn =n; window.clearInterval(startAE); changemainimg( );}

四、结束语

教学实践证明，程序设计对初学者而言仍是很大的障碍，为了更加科学合理地进行教学，还需进一步研究和探讨。

参考文献：

[1]曾海.JavaScript程序设计基础教程，人民邮电出版社，2009年10月第1版

[2]王元安，郝登山.网页制作重庆大学出版社，2011年8月第1版

[3]陈益材，李睦芳.动态网站开发从基础到实践，2008年1月第1版

[4]《HTML/CSS/JavaScript标准教程》编委会.HTML/CSS/JavaScript标准教程，电子工业出版社，2008，11