张 颖

（扬州高等职业技术学校 江苏 扬州 225003）

1 引言

在一个网站的首页，通常会留有一片位置来凸显网站的动态，这片区域常常采用多张图片切换的效果，这就是轮播图。轮播图也叫首页焦点图，无论是大型购物网站，还是政府网站、教育网站、新闻网站[1-2]，轮播图几乎成了所有网站的标配，也是网站的一大看点和亮点。

轮播在默认情况下是循环向右轮播，在图片区的左右两侧一般会放两个按钮[3]，用户可以点击左右按钮来切换图片，图片区下方一般还会放几个与大图对应的圆点、短线、数字圆圈、缩略图等，如果点击某个指示器，会直接跳转到所单击的那张轮播图，并且图片标题也会同时跳转。轮播图内容可以是图像、内嵌框架、视频或者其他任何类型的内容。

如何高效便捷地设计轮播图的HTML结构、进行样式排版以及使用JavaScript控制轮播行为及交互，成了前端工程师的基本功。本文旨在对简易网页轮播图案例进行解析，理解通过CSS样式及JavaScript实现自动轮播、轮播控制的方法，熟悉前端页面开发的过程[4]。

2 轮播图设计思路

通过HTML布局将要展示的图片全部放在盒子里，在CSS文件中设置网页元素的显示、隐藏等格式，然后通过JavaScript代码动态更新网页元素的显示隐藏格式等，使得轮播图展示区只显示其中的一张图片，而将其余的图片隐藏。为了实现轮播效果，可以通过JavaScript中的setInterval()方法间歇调用指定的翻页代码来实现自动翻页。轮播效果见图1。

图1 轮播效果图

3 实现代码的解析

3.1 编写HTML布局页面

页面采用div布局，body标签中包括以下几点。……