图片轮播图，也被称为焦点图，是网页设计中使用最多的效果之一，多数网站上都能看到图片轮播图的身影。曾经有一项调查显示，图片轮播图的转化率能达到很高的水平，很多网站把焦点内容以这种形式展现出来，于是图片轮播图又名焦点图。图片轮播图的样式多种多样，JavaScript的实现也不尽相同，但实现的原理有限，常用的有定位法、显示隐藏法和无缝切换等。
本节就常用的几种方法分别实现同一款图片轮播图的不同效果，它们的长相相同。只是切换的方式不同。图片轮播图的基本功能有点击箭头切换到上一页/下一页、点击下方的小圆点显示对应的图片、自动播放以及鼠标悬浮在图片上方时显示箭头、按钮、暂停播放的功能。
友情提示：本节示例涉及JavaScript相关知识，建议学习完JavaScript章节后再回头练习。本节示例相对复杂，对于初学者来说有一定的难度，这里就不再显示示例效果和代码，感兴趣的读者可以下载到本地学习。