浅谈网页中实现图片轮播图效果的方法

周芷仪，陈 婷



浅谈网页中实现图片轮播图效果的方法

周芷仪，陈 婷

（昆明理工大学机电工程学院，云南 昆明 650504）

在互联网迅速发展的时代，对于web页面的效果要求也有增无减。轮播图因其在有限的网页空间中能尽可能多的展示信息而被广泛使用，使得网页更具有观赏性和可读价值，也使得用户体验得以提升。web端的各大网站以及基于B/S模式的浏览器窗口的前端实现都少不了HTML、CSS以及JavaScript这三大件的支持。本文用HTML语言实现页面布局，CSS实现样式设置，JavaScript脚本语言实现动画。在JavaScript设置的函数中，利用了定时器来控制图片变化的时间间隔，定时器中的函数用来设置图片透明度的渐进变化以及图片轮转播放效果。

HTML；CSS；JavaScript；轮播图；web页面

0 引言

Web技术是展现网页形态的主要技术手段，对网络环境的信息开发展现出重要的作用，而其工作的状况，对互联网用户的信息传输和获得服务的体验产生一定的影响，进而对整个信息环境价值的实现和整个社会的各项经济活动的展开具有一定的促进作用。如今无论是在传统的PC端还是移动端，Web技术在众多领域中都有着重要的作用。随着Web技术的不断进步和网页技术普及，各式各样的Web设计将受到越来越多的Web设计师的青睐[1]。在Web页面的各种效果中，轮播图效果的使用程度非常高。轮播图是指在电脑浏览器中通过鼠标点击，触屏设备中通过手指滑动，或设置定时器等方式使得数张图片在同一个位置有规律地滚动播放。用户可在一定时间内，在网页的同一个位置浏览到若干图片信息。轮播图因其在有限的网页空间中能尽可能多的展示信息而被广泛使用，例如众多电商网站利用这样的网页效果在固定页面中打出更多的广告等。轮播图使得网页更具有观赏性和可读价值，也使得用户体验得以提升。本文利用HTML、CSS、JavaScript三大语言支柱，完成整个轮播图从布局到运行的总体实现。其中HTML搭建总体框架，CSS用来控制网页外观的规则，增加网页的多种外观效果，包括透明、阴影等，吸引更多体验用户进行访问，JavaScript则是可以辅助用户得到更好的画面效果，同时保证代码和内容的分离。一直以来 Javascript语言已经是前端技术的核心语言。并且，近些年Javascript开发服务器端程序也被企业广泛的应用[2]。有了这三者相辅相成的支持，本文轮播图代码得以理想地实现。

1 轮播图原理

将要显示的图片依次作为无序列表的列表项，通过CSS样式使所有图片在同一区域内重叠放置。在JavaScript函数的设计中，通过z-index 属性设置图片的堆叠顺序，使拥有更高堆叠顺序的图片总是会处于堆叠顺序较低图片的前面。通过控制当前图片的透明度来实现变换效果，当图片的透明度由1变为0时，当前图片消失，层叠在下一张的图片自动出现。增加定时器，设置每隔指定时间调用函数，保证图片轮转效果自动进行下去。用CSS样式设置鼠标悬停效果，使得鼠标进入图片时出现方向按钮。点击方向按钮时，触发onclick事件调用JavaScript函数，令当前图片的透明度变为0且上一张或下一张图片透明度为1，从而实现手动控制图片播放方向。

2 轮播图效果概述

图片以透明度逐渐变小的方式显示下一张，最后一张图片播放结束后自动显示第一张，达到轮播的效果。鼠标放在图片上时停止轮播，且在图片水平两端出现向左及向右的箭头。鼠标放在任意箭头上，箭头部分的背景颜色加深，点击箭头会令图片随相应方向的次序依次变换。当鼠标移开时，图片继续从当前位置轮播。图片底部有一排圆圈按钮，其个数与图片总数目一致。当前显示第几张图片，相应第几个按钮就会亮起，其他按钮则为黑色，即按钮的样式随图片同步轮转变化。

3 编程语言介绍

3.1 HTML+CSS技术

HTML为超文本标记语言（Hyper Text Markup Language）。“超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。超级文本标记语言是标准通用标记语言下的一个应用，也是一种规范，一种标准，它通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容。

CSS为层叠样式表（Cascading Style Sheets）是一种用来表现HTML或XML等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

3.2 JavaScript技术

JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。用来给HTML网页增加动态功能。JavaScript是一种属于网络的脚本语言,已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果。本文所用到的JavaScript脚本是通过嵌入在HTML中来实现自身的功能的。

4 轮播图具体实现

4.1 HTML布局

<

本文以四张图片轮播为例，将每张图片的地址作为列表项内容放入无序列表中。方向按钮为<、>符号，形象表示图片变换方向，放入链接标签中，CSS类名为type。设置div容器，名称为buttons，用于存放跟随图片同步轮转的圆形按钮。按钮用标签表示，CSS类名为on。以上所用元素都放在一个大的div容器中，名称为banner。

4.2 CSS样式

对于无序列表标签，设置list-style: none属性，即消除列表样式。在列表项标签的属性设置中，position: absolute用来定位于相对于包含它的元素的指定坐标；列表项元素与浏览器的上边界与左边界的间隔为0，元素的宽、高均为100像素。

控制图片方向的按钮类名为type，在CSS中用类选择器定义其样式。其中cursor: pointer用来定义鼠标放在按钮区域上时光标呈现为指示链接的指针（一只手），display: none定义了按钮区域不会被显示。行间的距离为20像素，宽度为20像素，元素居中显示，大小为15像素并且加粗显示。position: absolute将元素的定位类型设为相对定位，即相对于所在的div容器进行定位，相对于容器顶部距离90像素。z-index设置元素的堆叠顺序，拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。z-index：2则将按钮图片的起始堆叠顺序定义为2。background-color: RGBA(0,0,0,.3)，按钮区域的背景颜色为黑色且透明度为0.3，color: #fff定义按钮区域中的元素颜色为白色。在.type:hover{}中设定鼠标悬停属性，其中定义了鼠标放在按钮上时按钮区域背景颜色为黑色且透明度变为0.7。

总div容器的id名为banner，在CSS中用id选择器定义鼠标在div上的悬停效果。#banner: hover. type { display: block;}则实现了鼠标放在图片上后，原本没有出现的方向按钮就会出现。左右方向图片id名分别为lef、rig，#lef { left: 10px;}，#rig { right: 10px;}分别实现图片按钮相对于div容器左边距10像素以及右边距10像素。

用id选择器#buttons{}设置跟随图片同步轮转的圆形按钮所在的div。将该div容器设置为相对定位，高度为10像素，宽度为100像素，堆叠顺序为2，左边距为80像素，下边距为3像素。#buttons span{} id选择器用来设置标签属性，将元素的宽高均设为10像素，四个角都设为圆角边框，即元素设为圆形。添加鼠标指示链接的指针效果，float: left设置向左浮动，保证四个标签中的元素位列一排。背景颜色设为#333，右外边距为5像素。

最后，通过#buttons .on{}设置class名为on的标签背景颜色为aquamarine。

4.3 JavaScript实现

5 结语

本文用HTML语言实现页面布局，CSS实现样式设置，JavaScript脚本语言实现动画。在JavaScript设置的函数中，利用了定时器来控制图片变化的时间间隔，定时器中的函数用来设置图片透明度的渐进变化以及图片轮转播放效果。另外添加控制图片方向的按钮，以及鼠标控制事件，也为轮播效果增添亮点。

作为已经被广泛应用于web开发的脚本语言JavaScript，可用于在网页中添加各种动态样式，从而在浏览器中达到更加流畅精美的用户体验，并且在实现动态网页效果以及web访问者间的交互。从面向对象的角度来看，JavaScript 是一种纯面向对象的语言，甚至函数本身也是对象；但同时又具有一些其特有的语言特性，如动态类型、无类动态对象、原型继承、闭包、函数式编程等。

在互联网飞速发展的信息环境下，对于网页的浏览效果的要求也是有增无减。web端的各大网站以及基于B/S模式的浏览器窗口的前端实现都少不了HTML、CSS以及JavaScript这三大件的支持。正是有了这三部分的布局，增添样式以及设置特效，再加上逐步流行的各种框架和库，使得网页的设计和实现日趋新颖并更有挑战，对于未来的前端开发要求更是越来越高。

[1] 臧进进, 鄂海红. 基于响应式 Web 设计的网页生成系统研究与实现[J]. 软件, 2015, 36(6): 37-41

[2] 荣艳冬. 以岗位需求为导向的Javascript课程构建[J]. 软件, 2015, 36(06): 18-20.

[3] 龚丽. 网页中轮播图的实现方法探讨[J]. 电脑知识与技术, 2017, 13(31): 273-274+281

[4] 李轶. 基于JavaScript的面向对象程序设计研究[J]. 江汉大学学报(自然科学版), 2010, 38(03): 52-56.

[5] 郑俊生, 姜敏. 一种基于Div+CSS+JavaScript的网页布局特效研究[J]. 电脑知识与技术, 2008(17): 1556-1558.

[6] 闫志英. 浅析Web前端开发技术[J]. 无线互联科技, 2016(02): 47-48.

[7] 陈月, 秦福建. Web前端开发技术以及优化方向探究[J]. 信息与电脑(理论版), 2016(04): 35+37.

[8] Jeremy Keith, Jeffrey Sambells. JavaScript DOM编程艺术[M]. 北京: 人民邮电出版社, 2011: 1-3.

Talking About How to Achieve the Effect of Picture Rotation Chart in Webpage

ZHOU Zhi-yi, CHEN Ting

(College of Mechanical and Electrical Engineering, Kunming University of Science & Technology, Kunming 650500, China)

In the era of rapid development of Internet, the effect of web pages is increasing. Rotation map is widely used because it can display as much information as possible in the limited web space, making the web page more ornamental and readable, and also making the user experience to improve. HTML, CSS and JavaScript are essential to the front-end implementation of Web sites and browser windows based on B/S mode. In this paper, HTML language to achieve page layout, CSS to achieve style settings, JavaScript scripting language to achieve animation. In the function set in JavaScript, the timer is used to control the time interval of picture changes, and the timer function is used to set the gradual change of picture transparency and the effect of picture rotation.

HTML; CSS; JavaScript; Rotation map; Web page

TP311.1

A

10.3969/j.issn.1003-6970.2018.10.035

周芷仪（1993-），女，研究生在读，昆明理工大学，主要研究方向：企业集成及信息化工程、电子商务与管理信息系统。

周芷仪，陈婷. 浅谈网页中实现图片轮播图效果的方法[J]. 软件，2018，39（10）：187-191