admin 管理员组文章数量: 1086019
2024年3月11日发(作者：java swt)
ISSN1009-3044
ComputerKnowledgeandTechnology
电脑知识
电脑知识
与技术
与技术
Vol.17,No.5
February
2021
E-mail：************.cn
第17卷第5期(2021年2月)
http：//
Tel：+86-551-6569
网页中实现轮播图的简易方法探讨
马宁宁
（国家图书馆，北京100081）
摘要：互联网时代，网站信息的展示方式将极大地影响信息的传递效率和用户的体验效果。轮播图能够利用有限的网页
空间展示更多的信息内容，并且更具观赏性，因而被广泛使用，也提升了用户体验。文章介绍了3种制作轮播图的简易方
法，这些方法操作简单、功能强大、效果绚丽，希望能够为网站开发人员制作轮播图提供借鉴。
关键词：轮播图；Bootstrap；Swiper；myFocus
中图分类号：G252文献标识码：A
开放科学（资源服务）标识码（OSID）：
文章编号：1009-3044(2021)05-0022-04
1轮播图简介
1.1定义
在网站制作过程中，为了利用最少的空间，展示最多的内
容，“轮播图”便应运而生。望文生义，“轮播图”即轮流播放的
图片。罗才华认为，轮播图又叫焦点图，就是在固定的网页界
面中，将几张相同大小的图片，按照相同的时间间隔进行循环
展示；在图片区的左右两侧一般会放两个按钮，用户可以点击
左右按钮来切换图片；图片区下方一般还会放几个与大图对应
的圆点、短线、数字圆圈、缩略图等，用户也可以点击这些导航
按钮来切换图片
[1]
。
1.2功能作用
体位移量、改变图片的高度或透明度，同时使用定时器实现图
片自动播放，还可以给轮播图加上鼠标点击事件或移入移出事
件，实现轮播图的点击切换或移入移出透明度变化效果
[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所示）
为例，分别介绍这三种插件的具体实现方法。
实际应用中的轮播图是多姿多彩的：图片区不仅可以放图
片，还可以放文字说明和超链接；切换图片不仅可以点左右按
钮或下面小点，还可以用鼠标放在图片上左右拖动来实现；图
片展示区既可以一屏只展示一张图片，也可以每屏展示几张或
者分几行展示图片；此外，导航小圆点还可以换成数字标签，切
换方式也不局限于幻灯片切换方法，还可以进行3D旋转切换
等。这些功能我们在实际网站制作中都经常会用到。
轮播图一般放在网页最显眼的位置，由于动态效果具有一
定的观赏性，所以能够第一时间吸引用户注意，进而点击浏览。
国外设计机构的调查显示，轮播图的点击率明显高于文字内
容，转化率也达到文字标题的5倍之多
[2]
。因此，轮播图技术已
经被广泛应用到各大门户网站中。
1.3实现原理
轮播图的实现原理就是：将一组大小相同的图片平铺在一
行中，然后通过CSS代码布局，使得轮播图展示区只显示其中
的一张图片或固定数目的图片，而将其余的图片隐藏。为了实
现轮播效果，可以通过JavaScript语言编程来控制图片区的整
收稿日期：2020-10-28
基金项目：本文系国家图书馆科研项目“公共图书馆微信公众号推广运营策略研究”（项目编号：2019-17）的研究成果之一
作者简介：马宁宁（1983—），女，山东泰安人，图书馆馆员，硕士，研究方向为数字图书馆建设、网站前端制作。
22
本期推荐本栏目责任编辑：李雅琪
第17卷第5期(2021年2月)
图2基础轮播图实例
2.1Bootstrap
应式、
Bootstrap
HTML
移动设备优先的网站
是全球最受欢迎的前端框架之一，
[4]
。Bootstrap基于
可用来构建响
开源框架。它包含
、CSS、JavaScript
50
、
多个实用的布局类、
Jquery等技术，是一套简洁灵活的前端
less开发，集合了
工具类和页面内容
类的组件，为Web前端工程师提供了规范的CSS标准和JS插
件，兼容性强，有效解决了前端开发中因为浏览器兼容、屏幕分
辨率、移动终端类型等问题产生的网页布局混乱、界面风格不
一、用户体验差、JS交互失效等问题
[5]
。使用Bootstrap开发的网
站，能够根据用户终端设备的屏幕尺寸自动调整页面布局和图
片尺寸，使前端开发变得快捷高效
[6]
。那么，用Bootstrap框架制
作的网站中如何制作轮播图呢？其中包含的轮播(carousel)组
件完美地解决了这个问题，同时用该组件开发的轮播图还具有
响应式的特点。
使用Bootstrap中的carousel组件制作图2中的轮播图的步
骤如下：
步骤1：从Bootstrap官网下载最新版本的压缩包文件
，解压后从中找到文件和
boot⁃
的
jquery
css文件夹和
步骤
压缩文件，
js
文件，并分别保存到本地项目文件夹中
2：在html
并保存到前面提到的
文件夹中。从jQuery官网下载最新版本的
文件中引入步骤1
js
下载的
文件夹中。
文件、文件和文件，css
文件放在
标签之间，js文件则放到页面尾部且在