用JavaScript实现Web页的动态切换图片

于万国

（河北民族师范学院，河北 承德067000）

如今越来越多的网站在首页上都会使用动态切换图片来展示网站中的一些信息，比如购物类网站，在首页上使用动态切换图片来展示新产品或热卖产品。很多新闻类的网站首页使用动态切换图片来展示当前新闻。如图1中河北民族师范学院首页 （红色框起来的部分）。本文介绍使用JavaScript如何做动态切换图片的效果。使得图片既能自动切换，又能通过手动单击图片右下角的标号，显示相应标号对应的图片，即手动显示图片。

图1 河北民族师范学院首页

1 实现效果分析

该实现效果是在网页已经布局好的HTML文件上实现的。网页布局如图2所示。现要将网页中产品展示区域 （静态图片）替换成动态切换图片展示效果，如图3所示。即当用户打开网页时，图片就开始自动切换显示，并在显示每一张图片时，对应的图片标号底色变红，以告诉浏览者当前显示的是第几张图片。另外，当鼠标移动到某一个标号上时，其底色变红，图片停止自动切换显示，并显示此标号对应的图片；当鼠标离开时对应的标号恢复为原色，图片从下一张开始自动切换显示。再者，当用户点击某个图片时，显示出相应的链接网站。

图2 已经布局好的网页

图3 实现效果后的4张图片的动态切换显示

要完成以上提到的这些功能，需要从以下几个角度进行实现：

1）四种图片轮番在之前网页中那个静态图片的位置切换显示，如何将图片插入网页中？一般使用html构造网页的结构，如果使用＜img／＞标记的话，只能在同一个位置插入一张图片。

2）在这一小模块中插入标号，并且标号显示在图片的右下角。

3）当网页被打开时，图片就开始自动切换显示，并且对应的标号底色变红。

4）当鼠标指向某个标号时，标号底色变红，停止图片自动显示，显示当前标号对应的图片。

5）当鼠标离开时，标号恢复为原来的颜色，图片从当前鼠标指向的标号的下一张开始自动切换显示。

6）当用户点击某个图片时，显示对应的链接网站。

2 实现步骤

2.1 改变图中静态图片区域

分析网页结构，网页中其他部分不变，只改变图2中静态图片的区域。

（1）将原来的静态图片部分替换掉，这里要动态切换显示4张图片，使用HTML不能同时插入4张图片，只能先插入1张图片，让其成为默认显示的图片，也是起到占位的作用，之后使用JavaScript完成与其它图片的动态切换效果，并且其它几张图片的显示位置也是在默认图片的位置。

（2）在图片的右下角插入标号，这里的标号可以使用列表进行插入，并使用CSS布局将其水平显示，并进行相应定位，定位在图片的右下角。

2.2 图片自动切换显示

（1）当网页被打开时，图片就开始自动切换显示，并且对应的标号底色变红。既然是自动切换显示，首先想到BOM模型中的Set Interval（ ）方法，此方法是可以按照指定的周期 （以毫秒计）来调用函数或计算表达式的，Set Interval（code，millisec），其中code和millisec参数都是必须要写的，code代表要调用的函数或要执行的代码串，millisec代表周期性执行或调用code之间的时间间隔，以毫秒计。这里需要编写一个函数，能够实现图片切换显示，为了书写方便给这个函数起名叫change Pic（ ）函数，此函数就作为Set Interval的第一个参数，millisec参数就设置一个毫秒数就可以了。在开始写这个函数前，准备了4张图片放在文件夹images里，名字分别为1.jpg，2.jpg，3.jpg，4.jpg。其中1.jpg在html代码中已经插入。如何能让其自动切换呢？首先想到for循环，for（i＝0；i＜4；i＋＋）｛document.get Elements ById（"pic"）.src＝"images／"＋i＋".jpg"；｝，其中大括号中document.get Elements ById （"pic"）语句段的意思是：获得id＝”pic”的对象的引用，这里的id＝”pic”是写在html文件中插入默认图片的＜img／＞标签里的，src属性可设置或返回应当被载入框架中的文档的URL，这里将图片的地址赋给它，即获得图片对象，并且让其显示i.jpg，这里的i就有说法了，能让其使用for循环切换显示，但是当i＝3，即显示第四张图片后如何循环回来继续显示第一张图片呢？可以使用判断语句，当i＝3时，i＝0重新开始。但是有更简单的办法。就是使用i＝i%4＋1这条语句来变换i的值，其中i被定义为全局变量，并附初值为0，每当调用一次change Pic（ ）函数，i的值改变一次，而且是从1循环到1。change Pic函数实现了一半的功能，即可以切换显示图片了，如果将其作为Set Interval的参数就可以实现自动切换显示了。但还有一个问题没有解决，就是关于对应标号底色改变的问题。在这里可以使用document.get Elements ByName （"list1"）[i－1].style.background Color＝"red"；语句将对应底色变红，其中document.get Elements ByName（"list1"）中list1是列表项中name属性的属性值，document.get Elements ByName方法返回带有指定名称的对象的集合，之后的 [i－1].style.background Color，这条语句之后，可以预览一下效果，预览之前，在JS文件中加上window.onload＝function（ ）｛autoChange（ ）；｝这条语句，其中autoChange（ ）函数是自动切换显示图片的函数。之后预览网页的效果，就会发现每显示1张图片对应的标号底色变红没错，但同时切换显示完成之后，标号的底色没有恢复为原来的颜色，可以在将对应列表项底色变红之前使用同样的方法先将所有的列表项设置为原来的颜色，这里的颜色值为：＃C9D6D8。这样，第一个问题就解决了，图片自动切换显示，并且对应的标号底色变红。

2.3 手动显示图片

（1）接下来要解决的问题就是：当鼠标指向某个标号时，标号底色变红，停止图片自动显示，显示当前标号对应的图片，即手动显示图片，关键点即鼠标指向某个标号时，对应的图片显示，可以用鼠标事件onmouseover，将手动显示图片的函数show Pic（ ）作为onmouseover的值。这里的关键就是写show Pic（ ）函数，此函数除了手动显示图片的功能外，第一要解决的是当执行这个函数时先停止图片的自动切换显示，如何停止图片自动切换显示呢？可以用一个函数clear Interval，但需要set Interval函数传递给一个ID，也就是之前在写set Interval函数时，将其赋值给某个ID值，然后将此ID传递给clear Interval函数。

（2）接下来要写的就是show Pic（ ）函数，这里使用的是在html文件中的列表项添加超链接，将每一个列表项链接到对应的图片。然后使用document.get Attribute（“href”）方法取到每一张图片，然后将其赋值给document.get Elements ById（“pic”），然后将此函数赋值给onmouseover事件，即当鼠标经过每个列表项时，对应的图片显示出来。还要注意的就是对应底色变红的问题，跟以上方法类似，就不再赘述。还有保存当前显示的是第几张图片，这里用i来表示。因为当鼠标离开时，图片从下一张开始切换显示，所以要记录i的值。到这里基本的功能都已实现了。

2.4 点击图片，显示相应的图片链接的网页

点击每一张图片，链接到对应的网页，这个函数取名show Web（），首先需要有4个超链接的网页，也就是需要先准备4个超链接的URL，可以针对网页中的图片，制作4个介绍该产品的详细网页，这里没有制作就使用了Baidu，Google这样的网址作为链接的目的地址。将这4个URL存在一个数组hrefArray里，点击图片显示相应的超链接，很容易让我们想到BOM中的location对象，可以使用window.location.href＝？，就等于数组中的某一项值，哪一项呢？就是以上保存过i的值这样一个show－Web（）函数。但点击图片，没有显示相应的超链接，需要在＜img／＞标记里添加onclick事件，onclick＝showWeb（ ），＜img／＞标记就是在html文件中插入的默认显示图片，整个动态切换图片的效果就实现了。

3 总 结

在该实现方法中用到了JavaScript中的BOM和DOM模型，JavaScript中数组的使用以及每个自定义函数之间的关系等等。利用好这些知识点，就可以实现Web页上更加复杂的动态切换效果。

[1]孙良军.HTML＋CSS＋JavaScript网页设计与布局实用教程[M].北京：清华大学出版社，2011：223－226.

[2]明日科技.JavaScript从入门到精通[M].北京：清华大学出版社，2012：172－185.

[3]Timothy Boronczyk.Web开发入门经典[M].北京：清华大学出版社，2009：332－396.