在“品牌新闻”后面的图片是自动切换的，单击相应的数字图片能打开相应指定的图片，这样的动画也是通过使用JavaScript脚本语言加以实现的，制作的步骤如下：

1）在站点images文件夹里，准备4张一样大小的jpg图片，并分别命名为01.jpg、02.jpg、03.jpg以及04.jpg，所有图片都要在Photoshop软件中进行统一的处理，以保证图片的大小和格式都一样，准备的4张图片如图5-8所示。

图5-8 准备的4张图片

2）在Dreamweaver CS6软件中打开index.php页面，在第1张图片的位置加入如下的代码：

说明：

这段程序的意思是，将images文件夹下面的4张图片以＜DIV＞层的形式放置到页面里面，并分别定义层的名称。定义层的名称，是为了方便JavaScript脚本语言的调用。设置01.jpg这张图片，在默认状态下为可见。

3）在插入图片的表格外面，加入JavaScript的控制语言，具体设置如图5-9所示。

4）由于具体实现的JavaScript脚本语言太长，所以将其单独写了一段程序，并保存在站点style文件夹的Article.js文件中，具体操作如图5-10所示。

图5-9 加入控制图片的数量值

(www.daowen.com)

图5-10 脚本语言保存的文件

具体的程序内容如下：

5）那么这段程序要如何调入到网页中并进行应用呢？方法很简单，只要在top.php页面中＜head＞和＜/head＞之间加入图5-11所示的链接代码＜SCRIPT src="style/article.js"＞＜/SCRIPT＞即可。

图5-11 加入链接代码

6）最后还要用鼠标分别选择数字图片1、2、3、4，加入不同的脚本，用于控制单击时所指向的不同图片命令。如在图片1上加入的代码为javascript：toggleTo（1），“属性”面板设置如图5-12所示。

图5-12 加入链接的属性

7）执行菜单栏“文件”→“保存”命令后，输入地址http：//127.0.0.1/shop/，即可看到图片切换的效果，效果如图5-13所示。

图5-13 图片切换的动画效果