网页中实现轮播图的简易方法探讨

马宁宁

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

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

1 轮播图简介

1.1 定义

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

1.2 功能作用

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

轮播图一般放在网页最显眼的位置，由于动态效果具有一定的观赏性，所以能够第一时间吸引用户注意，进而点击浏览。国外设计机构的调查显示，轮播图的点击率明显高于文字内容，转化率也达到文字标题的5倍之多[2]。因此，轮播图技术已经被广泛应用到各大门户网站中。

1.3 实现原理

轮播图的实现原理就是：将一组大小相同的图片平铺在一行中，然后通过CSS代码布局，使得轮播图展示区只显示其中的一张图片或固定数目的图片，而将其余的图片隐藏。为了实现轮播效果，可以通过JavaScript语言编程来控制图片区的整体位移量、改变图片的高度或透明度，同时使用定时器实现图片自动播放，还可以给轮播图加上鼠标点击事件或移入移出事件，实现轮播图的点击切换或移入移出透明度变化效果[3]。具体实现原理如图1所示。

2 实现方法

常见的轮播图制作方法主要有：1）HTML5+CSS3+JavaScript：使用原生的JavaScript脚本来实现轮播图的步骤比较烦琐，但非常有助于理解轮播图的具体实现原理，比较适合JavaScript的初学者;2）HTML5+CSS3+jQuery：jQuery是一个JavaScript框架，它封装了JS常用的功能代码，大大简化了编码量，还解决了浏览器的兼容性问题，制作轮播图也稍微简单些;3）HTML5+CSS3：运用CSS3的变形（transform）、过渡（transition）、动画（animation）等属性也可以实现轮播图效果，不过该方法的实用性较差，很多复杂功能无法实现。

上述三种实现方式各有各的优缺点，但都需要一定的编程基础和强大的逻辑思维能力，需要开发者把轮播图的具体实现步骤用相应的语言描述出来，对于初学者不太友好。本文将介绍3种比较容易上手的轮播图实现方法，让原本烦琐难懂的实现过程变得简单易懂。并以同一种轮播图效果（如图2所示）为例，分别介绍这三种插件的具体实现方法。

2.1 Bootstrap

Bootstrap是全球最受欢迎的前端框架之一，可用来构建响应式、移动设备优先的网站[4]。Bootstrap基于less开发，集合了HTML、CSS、JavaScript、Jquery等技术，是一套简洁灵活的前端开源框架。它包含50多个实用的布局类、工具类和页面内容类的组件，为Web前端工程师提供了规范的CSS标准和JS插件，兼容性强，有效解决了前端开发中因为浏览器兼容、屏幕分辨率、移动终端类型等问题产生的网页布局混乱、界面风格不一、用户体验差、JS交互失效等问题[5]。使用Bootstrap开发的网站，能够根据用户终端设备的屏幕尺寸自动调整页面布局和图片尺寸，使前端开发变得快捷高效[6]。那么，用Bootstrap框架制作的网站中如何制作轮播图呢？其中包含的轮播（carousel）组件完美地解决了这个问题，同时用该组件开发的轮播图还具有响应式的特点。

使用Bootstrap中的carousel组件制作图2中的轮播图的步骤如下：

步骤1：从Bootstrap官网下载最新版本的压缩包文件bootstrap-4.5.0-dist.zip，解压后从中找到bootstrap.min.css文件和bootstrap.bundle.min.js文件，并分别保存到本地项目文件夹中的css文件夹和js文件夹中。从jQuery官网下载最新版本的jquery压缩文件，并保存到前面提到的js文件夹中。

步骤2：在html文件中引入步骤1下载的bootstrap.min.css文件、bootstrap.bundle.min.js文件和jquery-3.4.1.min.js文件，css文件放在标签之间，js文件则放到页面尾部且在 标签之前即可起作用。需要特别注意的是，两个js文件之间的顺序是： jQuery 必須排在前面，然后才是bootstrap.bundle.min.js插件。

2.2 Swiper

Swiper是一个开源而小巧的JS框架，它支持移动终端的触摸滑动，如果设备支持的话，它还能够使用终端硬件加速过渡效果。Swiper主要是面向苹果操作系统的，但也支持安卓和Windows 8以上的系统。Swiper目前已经更新到6.1.1版，由于3.0以后的版本不再考虑对电脑端的兼容问题，所以，如果开发者想兼容IE7及之前的PC端浏览器，就只能选择Swiper2.x的版本。Swiper完全开源（MIT Licensed），无论是个人网站还是商业网站使用都无须付费[7]。

使用Swiper制作图2中的轮播图的步骤如下：

步骤1：从Swiper官网下载最新版本的压缩包swiper-6.1.1.zip，解压后从中找到swiper-bundle.min.css文件和swiper-bundle.min.js文件，并分别保存到本地项目文件夹中的css文件夹和js文件夹中。

步骤2：在html文件中引入步骤1下载的swiper-bundle.min.css文件和swiper-bundle.min.js文件，前者放在标签之间，后者放在页面尾部且在 标签之前。

至此，Swiper版本的轮播图制作完毕。用Swiper制作的轮播图在电脑上可以用鼠标左右滑动来切换图片，在移动端还可以用手指触摸左右滑动来切换图片，功能比较强大。

2.3 myFocus

myFocus是一个专门用来制作Web端焦点图的开源JavaScript库。它使用原生的JavaScript编写，独立无依赖，性能卓越，同样效果比jQuery更流畅。我们可以使用myFocus轻松制作各种焦点图，而且这样制作的焦点图体积小（最新的2.0版不到10k），功能强（集成了30多种风格的图片切换效果），运行效率高（兼容ie6+和所有的主流浏览器）[8]。最重要的一点是，myFocus使用起来十分简单方便，拥有傻瓜式的API接口和标准的HTML结构布局，可以瞬间切换轮播图的风格，同时也支持开发人员自定义扩展开发。

使用myFocus制作图2中的轮播图的步骤如下：

步骤1：从网上下载最新版本的myFocus库文件（myfocus-2.0.4.min.js）和风格应用文件（mf-pattern），并全部保存到本地项目文件夹中的js文件夹中。

通过上面三种轮播图的制作我们可以看出：Bootstrap可以制作简单通用的轮播图，并能配合Bootstrap系统做到多屏适用。Swiper是最近比较火的一枝独秀，功能强大，样式丰富，官方网站上也有丰富的轮播图案例供用户免费下载使用。myFocus是一个小家碧玉，图片切换效果比较绚丽，体积较小，使用起来也方便快捷。三种软件各有各的优点，网站开发者可以根据自己的具体需求选择合适的开发框架。

3 结束语

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

参考文献：

[1] 罗才华.一种基于原生JavaScript的焦点轮播图简易实现[J].南方职业教育学刊，2019，9（3）：103-109.

[2] 李新荣.运用CSS3和JQuery对电商网站焦点图轮展效果技术的实现[J].品牌，2015（3）：40，43.

[3] 龚丽.网页中轮播图的实现方法探討[J].电脑知识与技术，2017，13（31）：273-274，281.

[4] Bootstrap中文网[EB/OL].[2020-08-22].https：//www.bootcss.com/.

[5] 傅翠玉，王少茹，洪秀金.Bootstrap框架在响应式WEB开发中的应用[J].电脑知识与技术，2018，14（21）：85-86.

[6] 杨萃洁.Bootstrap响应式设计在服务高校师生信息发布平台开发中的应用实践探究[J].教育现代化，2019，6（25）：111-114，124.

[7] Swiper 中文网[EB/OL].[2020-08-10].https：//swiper.com.cn/.

[8] 赵锋.基于MyFocus制作网页焦点图的实现方法[J].淮北职业技术学院学报，2015，14（4）：140-141.

[9] myFocus JS焦点图库v2.0.1稳定版[EB/OL].[2020-08-13]. http：//demo.jb51.net/js/myfocus/demo.html.

【通联编辑：谢媛媛】