马宁宁

摘要：互联网时代，网站信息的展示方式将极大地影响信息的传递效率和用户的体验效果。轮播图能够利用有限的网页空间展示更多的信息内容，并且更具观赏性，因而被广泛使用，也提升了用户体验。文章介绍了3种制作轮播图的简易方法，这些方法操作简单、功能强大、效果绚丽，希望能够为网站开发人员制作轮播图提供借鉴。

关键词：轮播图;Bootstrap;Swiper;myFocus

1 轮播图简介

1.1 定义

在网站制作过程中，为了利用最少的空间，展示最多的内容，“轮播图”便应运而生。望文生义，“轮播图”即轮流播放的图片。罗才华认为，轮播图又叫焦点图，就是在固定的网页界面中，将几张相同大小的图片，按照相同的时间间隔进行循环展示;在图片区的左右两侧一般会放两个按钮，用户可以点击左右按钮来切换图片;图片区下方一般还会放几个与大图对应的圆点、短线、数字圆圈、缩略图等，用户也可以点击这些导航按钮来切换图片[1]。

1.2 功能作用

实际应用中的轮播图是多姿多彩的：图片区不仅可以放图片，还可以放文字说明和超链接;切换图片不仅可以点左右按钮或下面小点，还可以用鼠标放在图片上左右拖动来实现;图片展示区既可以一屏只展示一张图片，也可以每屏展示几张或者分几行展示图片;此外，导航小圆点还可以换成数字标签，切换方式也不局限于幻灯片切换方法，还可以进行3D旋转切换等。这些功能我们在实际网站制作中都经常会用到。……