如何在网页中制作图片切换效果

龙敏敏

（衡阳广播电视大学，　湖南　衡阳　421001）



如何在网页中制作图片切换效果

龙敏敏

（衡阳广播电视大学，湖南衡阳421001）

摘要：几乎所有的大中型网站中都在首页中使用图片切换效果。不断自动切换的画面，不但能增加网页中的动态效果，使页面显得更加生动活泼，吸引大家的注意力，而且能大大节约页面空间，能得在有限的空间中显示更多的内容。

关键词：图片切换；时间轴；行为

一、Dreamweaver网页设计软件的特点

Dreamweaver是国内外普遍应用的专用网页设计软件，其“所见即所得”的可视化网站功能，在网页设计与制作领域中用户最多、应用最广、功能最强大，它集网页设计、网站开发和站点管理功能于一身，具有可视化、支持多平台和跨浏览器的特性。作为一款优秀的网页设计软件，Dreamweaver自身具有许多出色设计理念，例如行为、时间轴和资源等，可以让用户无需手写代码，就能轻松地创建各种动态效果，使页面显得更加生动，引人注目。

（一）灵活的编写方式

Dreamweaver具有灵活编写网页的特点，将“设计”和“代码”编辑器合二为一，在设计窗口中还精化了源代码，能帮助用户按工作需要定制自己的用户界面。

（二）可视化编辑界面

Dreamweaver是一种所见即所得的HTML编辑器，可实现页面元素的插入和生成。可视化编辑环境大量减少了代码的编写，同时亦保证了其专业性和兼容性。

二、网页中的图片切换

在大量的网站中都会看到这样的效果：首页中有3—10幅图片自动循环不断切换，在图片下方有数字，当切换到哪张图片时，相应的数字会突出显示；当鼠标移到图片上或数字上时停止变换，鼠标移开时继续切换；另外，在每张图片上也可以添加链接。

对于精通代码编写的人员来说，可以编写代码如Javascript语言在页面中实现这种效果，但是对于不会写代码的人如何实现呢?Dreamweaver通过时间轴和行为面板配合实现这种效果，其中：利用时间轴实现图片自动切换；利用行为控制时间轴的停止和播放、转到指定的帧、实现层属性的改变，帮助编程能力差的用户实现同样的效果。

三、制作方法

这里，以制作3张图片切换效果为例来说明，首先准备好3张图片。

（一）插入表格

在网页中，插入一个400*300的2行1列的表格，可设置边框为1，边框颜色为蓝色。

（二）添加图片至时间轴

在上方单元格中插入第一张图片，利用时间轴来实现图片的自由变换，时间轴中的对象可以是层或图像。将该图片拖到时间轴Timeline1中，并将该动画条延长至90帧。接着，分别在第30帧、第60帧处添加关键帧，并分别将第30帧和第60帧处的图片源改为第二张图片和第三张图片，最后一帧即第90帧的图片源保持第一张图片不变，并选择“自动播放”和“循环”复选框。这样，3张图片自由切换效果便实现了。

（三）添加图片对应的数字

在下方单元格中，插入一个1行3列右对齐的嵌入表格，在该嵌入表格的3个单元格中分别插入3个div标签，分别命名为v1，v2，v3，在这3个div标签中分别输入1、2、3，这里使用div标签是为了后面对标签的背景颜色的改变以及标签中数字大小和颜色的改变。可以使用Layer层来实现将数字放在图片的右下角处还是放在图片的下方。

（四）鼠标放在图片上时停止切换

接下来，制作鼠标移到图片上时图片停止变换，以便浏览者仔细观看该图片的内容，鼠标移开时继续变换的效果。选择图片，添加行为“时间轴”—“停止时间轴”，选择要停止的时间轴名称Timeline1，确定；再添加行为“时间轴”—“播放时间轴”，选择要播放的时间轴Timeline1后，确定。将这两个动作的事件分别改为OnMouseOver、OnMouseOut，即当鼠标移上去时停止时间轴的播放，当鼠标移开时继续时间轴的播放。

（五）鼠标放在数字上时切换到相应的图片并停止切换

另外，还要设置鼠标移到数字上时切换到相应的图片并停止时间轴。浏览者可以选择任意一个数字，可以随即切换到该数字对应的图片，非常方便，这样用户可以迅速进行切换，快速查看自己想要的内容，不用等它一个一个按顺序播放。

方法为：选择数字“1”，添加行为“时间轴”—“转到时间轴帧”，在对话框中选择要转到的时间轴Timeline1，“前往帧：”栏中填1，即表示转到第1帧，也就是切换到第一幅图片，确定，再将事件改为OnMouseOver，即鼠标放上去时转到第1帧；再添加行为“时间轴”—“停止时间轴”，选择Timeline1，事件改为OnMouseOver，即鼠标放上去在转到第1帧的同时并且停止时间轴；添加行为“时间轴”—“播放时间轴”，选择Timeline1，事件改为OmMouseOut，即鼠标移开时继续播放时间轴。按照相同的方法为数字“2”和“3”各自添加这3种行为，不同的是，在“转到时间轴帧”的“前往帧：”栏中分别填30和60，表示转到第30、60帧，即切换到第二幅和第三幅图片。

（六）切换到图片时相应的数字突出显示

至此，图片的整体切换效果其实已经出来了，最后再设置数字的显示效果。原始状态下所有数字的颜色为黑色（#000000），无背景，大小为12像素。无论图片怎么变换，数字的属性不会有任何改变，这样用户根本就不会知道当前到底播放到第几幅图了，自己想要随意切换当然也不方便。这里，要设置当自动切换到某个图片时，相应的数字要突出显示，或者鼠标移到某个数字上时，该数字也要突出显示，比如数字颜色变为白色，背景颜色变为红色，数字大小放大变为14像素，其他数字则显示为原始状态。

实现的方法为：

在时间轴的行为栏的第1帧处单击：

a)添加行为“改变属性”，选择对象类型“DIV”，命名对象选择“v1”，属性栏中选择“style.fontsize”，值设为14（字号设为14）；

b)添加行为“改变属性”，选择对象类型“DIV”，命名对象选择“v1”，属性栏中选择“style.color”，值设为#ffffff（颜色设为白色）；

c)添加行为“改变属性”，选择对象类型“DIV”，命名对象选择“v1”，属性栏中选择“style. backgroundcolor”，值设为#ff0000（v1背景颜色设为红色）；

d)添加行为“改变属性”，选择对象类型“DIV”，命名对象选择“v2”，属性栏中选择“style.fontsize”，值设为12；

e)添加行为“改变属性”，选择对象类型“DIV”，命名对象选择“v2”，属性栏中选择“style.color”，值设为#000000（文字颜色设为黑色）；

f)添加行为“改变属性”，选择对象类型“DIV”，命名对象选择“v2”，属性栏中选择“style. backgroundcolor”，值设为transparent（v2背景颜色设为透明）；

g)添加行为“改变属性”，选择对象类型“DIV”，命名对象选择“v3”，属性栏中选择“style.fontsize”，值设为12；

h)添加行为“改变属性”，选择对象类型“DIV”，命名对象选择“v3”，属性栏中选择“style.color”，值设为#000000；

i)添加行为“改变属性”，选择对象类型“DIV”，命名对象选择“v3”，属性栏中选择“style. backgroundcolor”，值设为transparent（v3背景颜色设为透明）。

这样，在行为栏的第1帧处会出现“—”号，表示该处添加了行为。接下来，在时间轴的行为栏的第30帧和第60帧处分别添加第1帧处类似的行为，或者将第1帧处的行为拷贝到30帧和60帧处再进行适当的修改即可。

四、结论

现在几乎所有的中大型网站中都会用到图片切换效果，实现的方法也是多种多样，比如可以使用不同的脚本代码来实现，鼠标操作的方法自然也有很多种。本文介绍的这种方法虽然在步骤上有点繁琐，产生的代码会比较长，但是比较容易理解，对于即使没有厚实编程功底的设计人员来说，操作起来也比较简单。

参考文献：

[1]艺博，张明真.《网页设计与制作—Macromedia Dreamweaver 8》.北京：高等教育出版社,2007.

[2]王锦等.《Dreamweaver MX 2004中文版基础教程》.北京：机械工业出版社,2005.

（责任编辑：魏树峰）

中图分类号：TP399

文献标识码：A

[文章编号]1671－802X(2016)02－0061－03

收稿日期：＊2016－03－01

作者简介：龙敏敏（1979-），女,湖南祁东人，讲师，研究方向：计算机教育教学。E-mail:714773919@qq.com.

Picture Switching Effect in Webpage Design

LONG Min-min
(Hengyang Radio&TV University,Hengyang 421001,Hunan)

Abstract:Almost all the major websites use picture switching effects on their first page.The switching pictures can not only enhance the dynamic and lively effects but also attract viewers’attention.The pictures also save much page room and enable it to display more contents in the limited space.

Key words:picture switching;time axle;behavior