轮播图导航制作在Web前端中的实践与应用

赵素萍，杨 璐，康晶晶

（1.晋中信息学院大数据学院，晋中 030800；2.晋中信息学院信息工程学院，晋中 030800）

0 引言

网站的首页，除了有常规的导航栏，通常还有一个轮播图导航。轮播图也叫焦点图，无论是购物网站、政府网站、教育网站，还是新闻网站，无论是在电脑端还是手机端的网页，无论是手机APP 还是各种APP 内嵌的小程序，主题banner 部分都可见到轮播图。轮播图是一种观赏性强的信息展示方式。

在默认情况下，轮播图是循环向右轮播，轮播图的两侧各有一个箭头，用户可以通过单击箭头切换上一张或下一张图片。轮播图的图片也是一种导航，单击图片会跳转到相应的网页。轮播图的下方区域有焦点，用户悬浮焦点可实现图片切换。

本着一切以用户为中心的原则，当用户悬浮焦点或单击箭头后，暂停周期定时器，同时当用户的鼠标离开焦点和箭头区域后，触发周期定时器让其自动切换图片。本案例主要使用HTML5 结构，CSS3 样 式和JavaScript 脚 本来 实现轮播图导航。这些技术是前端工程师必须要掌握的基本技能。

1 HTML内容

网页中主要显示的内容为一张超链接图片，4个无序列表项实现用户想看随机一张轮播图的效果，两个箭头实现上一张和下一张的效果，这里需要注意的是，大于号和小于号在HTML中属于标签的一部分，在正文中不允许使用，需要使用特殊字符对应的代码才能实现，其中“<；”表示小于号，“>；”表示大于号，主要代码如下：

＜div class=“banner”＞

＜a href=“”id=“imga”＞＜img src=“”id=“bnimg”＞＜/a＞

＜ul＞

＜li class=“dot”onmouseover=“overchange（0）”

onmouseout=“settime（0）”＞1＜/li＞//2、3、4同1

＜/ul＞

＜div class=“lt”onclick=“backimg（）”onmouseover=“stopchange（）”

onmouseout=“startchange（）”＞<；＜/div＞

＜div class=“rt”onclick=“nextimg（）”其余同上＞>；＜/div＞

＜/div＞

2 样式

样式主要通过相对定位、绝对定位和偏移将dot 导航和箭头导航放到合适的位置。通过过渡和hover伪类实现导航悬浮特效。

2.1 dot导航

通过绝对定位的定位设置，将dot 导航放置在合适的位置，需要注意的是，设置绝对定位的元素，需要将父元素设置为已经定位的一种，主要包括绝对定位absolute、相对定位relative 和固定定位fixed。由于绝对定位会使其失去在源文档流的位置，所以如果要保留父元素在源文档流的位置，父元素不能设置为绝对定位。由于固定定位始终是相对于浏览器进行定位的，而这种方式使用的情况少之又少，所以常用的方式是将父元素定位为relative 相对定位，这样父元素既是已经定位的元素，同时也不会失去源文档流中的位置。

通过偏移进行精确定位，偏移包括四种，分别是left、right、top 和bottom，一般情况下只需要使用两个属性就可以达到我们想要的效果，如需将元素设置在父元素的左下角，那么只需要设置left 和bottom 两个属性即可。如果用户同时设置了left 和right，浏览器会以left 为准。同理，如果用户同时设置了top 和bottom，浏览器会以top为准。主要样式代码如下：

.banner｛position：relative；｝/*父元素*/

. banner ul｛position：absolute；bottom：10px；left：800px；｝/*子元素*/

设置每个dot 导航的背景为圆形、灰色、透明度为0.5 的样式，由于列表项为块状元素，特点是独占一行，为了让其共享一行，先需要将其设置为行内块式，行内块式的特定是可以共享一行，同时还可以设置其宽度、高度。一般情况下，横向的导航都是这样设置的。

背景颜色是通过rgba 函数来实现的，rgb 是三原色，a是透明度，通过一个函数即可定义元素的背景颜色和透明度。为了增加网站元素的立体效果，一般元素都会加圆角和阴影。初学者可以多次尝试选择合适的圆角半径、阴影大小。主要样式代码如下：

.dot｛display：inline-block；

background-color：rgba（11，11，11，0.5）；

border-radius：50%；

｝

2.2 箭头导航

盒子模型的整体宽度从外向内分别包括外边距、边框、内填充、宽度。具体计算如图1所示。

图1 盒子模型总宽度

为了将箭头放到合适的位置，内填充设置为离top 有100 px 的位置，需要注意的是，banner 的高度为300，内填充为100 时，内容的高度只能200。元素的整体高度如公式1所示：

其中左右导航没有设置外边距margin，没有设置外边框border，只设置了padding-top 和height。所以要想达到300 的高度，只需要使padding-top 加height 等于300 即可。这是初学者较难掌握的知识点，需要多练习达到熟练运用的效果。

先设置看不到的左右两边，当鼠标悬浮banner 时，左右导航定位在banner 的左右两边可以看到的位置，主要通过绝对定位和偏移实现，为了增加动画效果，使用过渡实现，背景颜色透明度为0.2，这里只展示右边的箭头，学习者可根据右箭头自主添加左箭头的样式。主要代码如下：

.rt，.lt｛

background-color：rgba（11，11，11，0.2）；

padding-top：100px；height：200px；

transition：all 0.5s；/*过渡*/

｝

.rt｛right：-1000px；｝/*初始放在离右边很远的位置*/

.banner：hover .rt｛right：0｝/*鼠标悬浮banner时，箭头放在banner右边*/

3 脚本

脚本的引入方式主要包括三种，行内式、内嵌式和外链式。这三种引入方式各有特点，分别应用于不同的场合。

行内式只用于控制当前元素，如滚动标签marquee，其鼠标悬浮暂停滚动，鼠标离开继续滚动的效果只需要使用行内式即可。由于滚动元素一般在网页中的使用情况并不多，所以常使用引入式。

嵌入式的脚本一般放在head 中和body 中两种。由于加载的顺序是先head，再body。所以Head 内的脚本一般为暂时不执行的方法和全局变量。Body 内的脚本一般为暂时执行的JavaScript 脚本。该方法一般用于初学者初次接触脚本，以及教授基础知识的讲师。在实际的网站中推荐使用外链式。

外链式通过script 标签的src 属性来引入“**.js”脚本文件。该方法利于后期维护，同时同一个脚本文件可用于多个网页文件，所以减轻了文件体积，可加快页面的加载速度。

本文主要使用的是行内式和外链式。轮播图主要通过脚本实现以下几种效果。

3.1 图片自动切换

自动切换需要用到周期性定时器的函数setInterval（周期性触发时间，触发周期）。通过该函数，让浏览器自动每隔一定时间触发修改图片的函数即可。为了修改图片，需要先获取到网页中的元素，获取元素需要使用DOM 文档对象模型，获取元素的方法主要有四种，主要包括getElementById、getElementsByName、getElementsByTagName、getElementsByClassName。这里初学者需要注意，由于ID 具有唯一性，所以通过ID获取元素的方法是getElementById，其中Element 表示一个元素，可以直接用，而其他三种情况没有唯一性，即使只有一个，返回的元素类型仍然是数组，也需要通过下标［0］来取出元素。这是初学者经常会犯的一个错误。本案例中的4 个dot 导航就需要通过类名获得，否则通过ID 获取的方法会有一定的代码冗余，也会降低浏览器加载的速度。本案例引入的元素和定义的变量主要如下：

var sj=setInterval（changeimg，3000）；//3s 切换照片的周期定时器

var imgshow=document.getElementById（‘bnimg’）；

var imga=document.getElementById（“imga”）；//通过ID获取超链接和图片

var dots=document.getElementsByClassName（‘dot’）；//获取所有DOT

var lt=document.getElementsByClassName（“lt”）［0］；//获取箭头元素

为了在同一个图片元素中显示不同的图片，只需要修改图片元素路径——src 属性即可。此时多张图片的路径主要是通过数组来预先设置，然后再将其循环设置为图片的src 属性。超链接的链接目标同上。主要代码如下：

var imgspath=［“images/b1.jpg”，……］；//4 张图片路径

var hrefs=［“http：//www.baidu.com”，……］；//4 个超链接网址

为了让用户了解到当前播放的是第几张图片，通过dot 导航的文字颜色变化来实现。由于计算机具有指令性操作的特性，即程序员要让计算机执行的每一步操作都必须明确说明，否则会出错，如当前播放的是第一张图片，我们如果要让其播放第二张图片，就需要将第一个dot 导航先设置为白色，再将当前的第二个导航设置为蓝色。由于切换图片在多个地方都会用到，为了降低代码的冗余，这里主要通过定义函数来实现，函数体功能为：将所有列表项的文字颜色都改成白色，修改图片和超链接，修改当前dot项的颜色。主要代码如下：

var i=-1；//设置全局变量，记录当前播放的图片

function change（k）｛

clearcolor（）；//清除所有颜色

imgshow.src=imgspath［k］；//通过下标修改显示的图片

imga.href=hrefs［k］；//通过下标修改超链接的链接目标

dots［k］.style.color=“blue”；//重新设置当前列表项的文字颜色

｝

经过上述的基本操作后，只需要设置周期性触发操作的函数，即可实现自动切换。为防止数组溢出显示错误，需要确定全局变量i的值始终在0～3之间。主要代码如下：

function changeimg（）｛

if（++i＞3）i=0；//如果下一项超出范围，回到第一项

change（i）；修改图片

｝

3.2 dot导航

由于计算机的每一步操作都要求由程序员给出，所以为了实现鼠标悬浮更改图片，鼠标离开继续切换的效果，需要通过onmouseover 鼠标悬浮事件和onmouseout 鼠标离开事件，分别设置以下效果：

鼠标悬浮overchange事件实现轮播图切换到当前图片和超链接，并暂停周期切换，获取当前dot 导航的下标可以通过参数传递。主要代码如下：

function overchange（k）｛

change（k）；

clearInterval（sj）；

｝

鼠标离开settime 事件继续从当前图片的下一张图片开始周期切换。为了获取当前图片的下标，这里使用了最简单的方法，也是初学者最容易接受的方法，通过参数传递当前导航的下标，因为数组的下标是从0开始的，所以第一个dot导航的参数为0。

function settime（index）｛

i=index；//通过参数获取当前的dot导航下标

sj=setInterval（changeimg，3000）；

｝

初学者一定要注意的是，已经定义的变量不需要重复定义，所以这里的周期定时器不能重新定义，否则会发生切换错乱，这里的错乱主要表现为两个定时器同时定时，切换的速度不再是3 s一张，而是更快。

3.3 箭头导航

当用户单击左右剪头时，分别切换上一张和下一张，需要注意的是，最后一张的下一张不能切换时，需要将颜色改为灰色，让用户有个心理准备，第一张的前一张同理；否则，实现切换并停止周期定时器。直到鼠标离开时重新设置周期定时器即可。主要代码如下：

function nextimg（）｛

if（++i＞3）｛i=3； rt.style.color=“gray”；｝//最后一个不能切换，文字设为灰色

else｛change（i）；clearInterval（sj）；｝//切换并停止自动翻页

｝

最终的轮播图效果如下，除了能正常切换外，图2 表示鼠标悬浮时的实现效果；图3 表示已经是最后一张还单击下一张的效果。

图2 鼠标悬浮DOT2效果

图3 鼠标单击NEXT效果

4 结语

本案例主要使用了HTML5 的盒子模型、列表、超链接、图片等标签；CSS3的过渡、伪类、透明背景、定位和圆角等特效；JavaScript 的鼠标单击、悬浮、离开事件，Window 对象的周期定时器等功能；是综合性较强的案例，也是初学者比较感兴趣的案例，希望为初学者提供学习素材。