网页中实现轮播图的简易方法探讨
马宁宁
（国家图书馆，北京100081）
摘要：互联网时代，网站信息的展示方式将极大地影响信息的传递效率和用户的体验效果。轮播图能够利用有限的网页
空间展示更多的信息内容，并且更具观赏性，因而被广泛使用，也提升了用户体验。文章介绍了3种制作轮播图的简易方法，这些方法操作简单、功能强大、效果绚丽，希望能够为网站开发人员制作轮播图提供借鉴。关键词：轮播图；Bootstrap ；Swiper ；myFocus 中图分类号：G252
文献标识码：A
文章编号：1009-3044(2021)05-0022-04
开放科学（资源服务）标识码（OSID ）：
1轮播图简介
1.1定义
在网站制作过程中，为了利用最少的空间，展示最多的内容，“轮播图”便应运而生。望文生义，“轮播图”即轮流播放的图片。罗才华认为，轮播图又叫焦点图，就是在固定的网页界面中，将几张相同大小的图片，按照相同的时间间隔进行循环展示；在图片区的左右两侧一般会放两个按钮，用户可以点击左右按钮来切换图片；图片区下方一般还会放几个与大图对应的圆点、短线、数字圆圈、缩略图等，用户也可以点击这些导航按钮来切换图片[1]。1.2功能作用
实际应用中的轮播图是多姿多彩的：图片区不仅可以放图
片，还可以放文字说明和超链接；切换图片不仅可以点左右按钮或下面小点，还可以用鼠标放在图片
上左右拖动来实现；图片展示区既可以一屏只展示一张图片，也可以每屏展示几张或者分几行展示图片；此外，导航小圆点还可以换成数字标签，切换方式也不局限于幻灯片切换方法，还可以进行3D 旋转切换等。这些功能我们在实际网站制作中都经常会用到。
轮播图一般放在网页最显眼的位置，由于动态效果具有一定的观赏性，所以能够第一时间吸引用户注意，进而点击浏览。国外设计机构的调查显示，轮播图的点击率明显高于文字内容，转化率也达到文字标题的5倍之多[2]。因此，轮播图技术已经被广泛应用到各大门户网站中。1.3实现原理
轮播图的实现原理就是：将一组大小相同的图片平铺在一行中，然后通过CSS 代码布局，使得轮播图展示区只显示其中的一张图片或固定数目的图片，而将其余的图片隐藏。为了实现轮播效果，可以通过JavaScript 语言编程来控制图片区的整
体位移量、改变图片的高度或透明度，同时使用定时器实现图片自动播放，还可以给轮播图加上鼠标点击事件或移入移出事件，实现轮播图的点击切换或移入移出透明度变化效果[3]。具体实现原理如图1所示。
图1轮播图实现原理
2实现方法
常见的轮播图制作方法主要有：1）HTML5+CSS3+JavaS⁃cript ：使用原生的JavaScript 脚本来实现轮播图的步骤比较烦琐，但非常有助于理解轮播图的具体实现原理，比较适合JavaS⁃cript 的初学者；2）HTML5+CSS3+jQuery ：jQuery 是一个JavaS⁃cript 框架，它封装了JS 常用的功能代码，大大简化了编码量，还解决了浏览器的兼容性问题，制作轮播图也稍微简单些；3）HT⁃ML5+CSS3：运用CSS3的变形（transform ）、过渡（transition ）、动画（animation ）等属性也可以实现轮播图效果，不过该方法的实用性较差，很多复杂功能无法实现。
上述三种实现方式各有各的优缺点，但都需要一定的编程基础和强大的逻辑思维能力，需要开发者把轮播图的具体实现步骤用相应的语言描述出来，对于初学者不太友好。本文将介绍3种比较容易上手的轮播图实现方法，让原本烦琐难懂的实现过程变得简单易懂。并以同一种轮播图效果（如图2所示）为例，分别介绍这三种插件的具体实现方法。
收稿日期：2020-10-28基金项目：本文系国家图书馆科研项目“公共图书馆推广运营策略研究”（项目编号：2019-17）的研究成果之一作者简介：马宁宁（1983—），女，山东泰安人，图书馆馆员，硕士，研究方向为数字图书馆建设、网站前端制作。
Computer Knowledge and Technology 电脑知识与技术
第17卷第5期(2021年2月
)
图2基础轮播图实例
2.1Bootstrap
Bootstrap 是全球最受欢迎的前端框架之一，可用来构建响应式、移动设备优先的网站[4]。Bootstrap 基于less 开发，集合了HTML 、CSS 、JavaScript 、Jquery 等技术，是一套简洁灵活的前端开源框架。它包含50多个实用的布局类、工具类和页面内容类的组件，为Web 前端工程师提供了规范的CSS 标准和JS 插件，兼容性强，有效解决了前端开发中因为浏览器兼容、屏幕分辨率、移动终端类型等问题产生的网页布局混乱、界面风格不一、用户体验差、JS 交互失效等问题[5]。使用Bootstrap 开发的网站，能够根据用户终端设备的屏幕尺寸自动调整页面布局和图片尺寸，使前端开发变得快捷高效[6]。
那么，用Bootstrap 框架制作的网站中如何制作轮播图呢？其中包含的轮播(carousel)组件完美地解决了这个问题，同时用该组件开发的轮播图还具有响应式的特点。
使用Bootstrap 中的carousel 组件制作图2中的轮播图的步骤如下：
步骤1：从Bootstrap 下载最新版本的压缩包文件boot⁃strap-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 文件放在<head></head>标签之间，js 文件则放到页面尾部且在</body>标签之前即可起作用。需要特别注意的是，两个js 文件之间的顺序是：jQuery 必须排在前面，然后才是bootstrap.bundle.min.js 插件。
<!DOCTYPE html><html><head>
<!--导入bootstrap 插件的css 样式压缩文件--><link rel="stylesheet"href="css/bootstrap.min.css"></head><body>...
<!--导入js 文件，注意顺序：先导入jquery 文件，再导入bootstrap 的js 文件-->
<script src="js/jquery-3.4.1.min.js"></script><script src="js/bootstrap.bundle.min.js"></script></body></html>步骤3：创建bootstrap 轮播图实例中标准的html 结构，并填充图片内容。
<div id="pics"class="carousel slide">
<!--轮播图下面的导航小圆点--><ul class="carousel-indicators">
<li data-target="#pics "data-slide-to="0"></li><li data-target="#pics "data-slide-to="1"></li><li data-target="#pics "data-slide-to="2"></li>
<li data-target="#pics "data-slide-to="3"class="active"><
/li>
<li data-target="#pics "data-slide-to="4"></li>
<li data-target="#pics "data-slide-to="5"></li></ul>
<!--轮播图的图片内容和文字内容部分--><div class="carousel-inner">
<div class="carousel-item active"><img src="img/1.jpg"alt="First slide"></div>
<div class="carousel-item">
<img src="img/2.jpg"alt="Second slide"></div>
<div class="carousel-item">
<img src="img/3.jpg"alt="Third slide"></div>
<div class="carousel-item">
<img src="img/4.jpg"alt="Third slide"></div>
<div class="carousel-item">
<img src="img/5.jpg"alt="Third slide"></div>
<div class="carousel-item">
<img src="img/6.jpg"alt="Third slide"></div></div>
<!--轮播图左右两边的上一张和下一张按钮-->
<a class="carousel-control-prev"href="#myCarousel"role="button"data-slide="prev">
<span class="carousel-control-prev-icon"aria-hidden=
"true"></span>
<span class="sr-only">Previous</span></a>
<a class="carousel-control-next"href="#myCarousel"role="button"data-slide="next">
<span class="carousel-control-next-icon"aria-hidden=
"true"></span>
<span class="sr-only">Next</span></a></div>步骤4：在head 标签中添加css 样式，给轮bootstrap 播图定义大小。
<style>
/*设置轮播图区域的宽度和高度*/#myCarousel{width:757px;height:357px;}
Computer Knowledge and Technology电脑知识与技术第17卷第5期(2021年2月)
/*将默认的导航小横条修改为小圆点，并加大圆点之间的距离*/
.carousel-indicators li{
width:10px;
height:10px;
border-radius:50%;
margin-right:15px;
}
</style>
2.2Swiper
Swiper是一个开源而小巧的JS框架，它支持移动终端的触摸滑动，如果设备支持的话，它还能够使用终端硬件加速过渡效果。Swiper主要是面向苹果操作系统的，但也支持安卓和Windows8以上的系统。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-bun⁃dle.min.js文件，并分别保存到本地项目文件夹中的css文件夹和js文件夹中。
步骤2：在html文件中引入步骤1下载的swiper-bundle. min.css文件和swiper-bundle.min.js文件，前者放在<head></ head>标签之间，后者放在页面尾部且在</body>标签之前。<!DOCTYPE html>
<html>
<head>
<!--导入swiper插件的css样式压缩文件-->
<link rel="stylesheet"href="dist/css/swiper-bundle.min. css">
</head>
<body>
...
<!--导入swiper插件的js压缩文件-->
<script src="dist/js/swiper-bundle.min.js"></script>
...
</body>
</html>
步骤3：创建Swiper轮播图实例的标准网页结构，并填充自己的图片内容。
excel如何设置下拉框<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide"><a href="链接1"><img src= "img/01.jpg"alt="图1"/></a></div>
<div class="swiper-slide"><a href="链接2"><img src= "img/02.jpg"alt="图2"/></a></div>
<div class="swiper-slide"><a href="链接3"><img src= "img/03.jpg"alt="图3"/></a></div>
<div class="swiper-slide"><a href="链接4"><img src= "img/04.jpg"alt="图4"/></a></div>
<div class="swiper-slide"><a href="链接5"><img src= "img/05.jpg"alt="图5"/></a></div>
<div class="swiper-slide"><a href="链接6"><img src= "img/06.jpg"alt="图6"/></a></div>
</div>
<!--分页器选项（图片底部的小圆点）-->
<div class="swiper-pagination"></div>
<!--导航按钮选项（图片区左右两侧的箭头）-->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
如何使用count函数统计
<!--滚动条选项（图片区最底部的滚动大横条）-->
<!--<div class="swiper-scrollbar"></div>-->
saturation模块</div>
步骤4：在head标签中添加css样式，给Swiper轮播图定义大小。
<style>
.swiper-container{
width:757px;
height:357px;
}
</style>
步骤5：初始化Swiper，下面的代码要放在body末尾标签</ body>之前，步骤2中导入的js压缩文件代码之后。
<script type="text/javascript">
var mySwiper=new Swiper('.swiper-container',{
loop:true,//循环播放
pagination:{
el:'.swiper-pagination',//分页器
},
navigation:{//前进后退按钮
stacking racknextEl:'.swiper-button-next',//下一页
prevEl:'.swiper-button-prev',//上一页
},
scrollbar:{
el:'.swiper-scrollbar',//滚动条
},
})
</script>
至此，Swiper版本的轮播图制作完毕。用Swiper制作的轮播图在电脑上可以用鼠标左右滑动来切换图片，在移动端还可以用手指触摸左右滑动来切换图片，功能比较强大。
2.3myFocus
myFocus是一个专门用来制作Web端焦点图的开源JavaS⁃cript库。它使用原生的JavaScript编写，独立无依赖，性能卓越，同样效果比jQuery更流畅。我们可以使用myFocus轻松制作各种焦点图，而且这样制作的焦点图体积小（最新的2.0版不到10k），功能强（集成了30多种风格的图片切换效果），运行效率高（兼容ie6+和所有的主流浏览器）[8]。最重要的一点是，my⁃Focus使用起来十分简单方便，拥有傻瓜式的API接口和标准的HTML结构布局，可以瞬间切换轮播图的风格，同时也支持
Computer Knowledge and Technology电脑知识与技术第17卷第5期(2021年2月)
开发人员自定义扩展开发。
使用myFocus制作图2中的轮播图的步骤如下：
步骤1：从网上下载最新版本的myFocus库文件（myfocus-2.0.4.min.js）和风格应用文件（mf-pattern），并全部保存到本地项目文件夹中的js文件夹中。
步骤2：在html的head标签中导入库文件。
<script type="text/javascript"src="javascript/myfocus-2.0.4. min.js"></script>
步骤3：创建myFocus轮播图实例的标准网页结构，并进行图片内容的填充。
<div id="myFocus"><!--轮播图区域-->
<div class="pic"><!--图片区（放置图片的li数可自由增减）-->
<ul>
<li><a href="链接1"><img src="img/01.jpg"alt="图1 "/></a></li>
<li><a href="链接2"><img src="img/02.jpg"alt="图2" /></a></li>
<li><a href="链接3"><img src="img/03.jpg"alt="图3" /></a></li>
<li><a href="链接4"><img src="img/04.jpg"alt="图4" /></a></li>
<li><a href="链接5"><img src="img/05.jpg"alt="图5" /></a></li>
<li><a href="链接6"><img src="img/06.jpg"alt="图6" /></a></li>
</ul>
</div>
</div>
上面的代码中，img标签的各个属性代表的意义如下：src：轮播图中本地图片的存放地址；thumb：轮播图中底部导航缩略图的地址，需要相应风格的支持（可省略，若省略，即把大图地址作为其链接地址）；alt：当鼠标停留在图片上时，图片上显示的描述性文字；text：图片上显示的描述性语言，需相应风格的支持[9]；
步骤4：在创建完标准网页结构后调用，建议放在head尾标签前面。
iframe cookie跨域
<script type="text/javascript"> myFocus.set({
id:'boxID',//轮播图区块的ID名称
pattern:'mF_kdui',//采用的myFocus风格类型的名称
time:3,//图片切换的间隔时间，秒
trigger:'click',//图片切换的触发模式：点击click或悬停mouseover
width:757,//图片区的宽度px
height:357,//图片区的高度px
txtHeight:'default'//文字的高度px：默认default或隐藏0 });
</script>
至此，myFocus版本的轮播图制作完毕。
通过上面三种轮播图的制作我们可以看出：Bootstrap可以制作简单通用的轮播图，并能配合Bootstrap
系统做到多屏适用。Swiper是最近比较火的一枝独秀，功能强大，样式丰富，上也有丰富的轮播图案例供用户免费下载使用。myFo⁃cus是一个小家碧玉，图片切换效果比较绚丽，体积较小，使用起来也方便快捷。三种软件各有各的优点，网站开发者可以根据自己的具体需求选择合适的开发框架。
3结束语
互联网时代，网站信息的展示方式将极大地影响信息的传递效率和用户的体验效果。轮播图能够利用有限的网页空间展示更多的信息内容，并且更具观赏性，因而被广泛使用，也提升了用户体验。本文介绍了利用Bootstrap、Swiper、myFocus3种开源框架制作轮播图的简易方法，这些方法操作简单、功能强大、效果绚丽，希望能够为网站开发人员制作轮播图提供借鉴。
参考文献：
[1]罗才华.一种基于原生JavaScript的焦点轮播图简易实现[J].
南方职业教育学刊,2019,9(3):103-109.
[2]李新荣.运用CSS3和JQuery对电商网站焦点图轮展效果技
术的实现[J].品牌,2015(3):40,43.
[3]龚丽.网页中轮播图的实现方法探讨[J].电脑知识与技术, 2017,13(31):273-274,281.
jquery下载文件请求[4]Bootstrap中文网[EB/OL].[2020-08-22].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].swiper/.
[8]赵锋.基于MyFocus制作网页焦点图的实现方法[J].淮北职
业技术学院学报,2015,14(4):140-141.
[9]myFocus JS焦点图库v2.0.1稳定版[EB/OL].[2020-08-13]. demo.jb51/js/myfocus/demo.html.
【通联编辑：谢媛媛】
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论