《网页中轮播图的实现方法探讨》-工学论文，计算机论文-论文范文参考-科学狗论文网

标题

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

范文

龚丽

摘要：轮播图是指网页中一些带有滚动效果的图片，轮换播放及渐变滑动。充分利用该一网页效果，能够凸显网站的影响力，达到事半功倍的效果。轮播图默认情况下是循环向左滚动轮播，如果单击下方小圆点的话，会直接显示所单击的那张图。实现轮播有多种方法，该文主要讨论用JS脚本编程及Bootstrap框架定义的两种方法。

关键词：轮播图；JS实现方法；Bootstrap框架实现

中图分类号：TP311 文献标识码：A 文章编号：1009-3044（2017）31-0273-02

轮播图是指网页中一些带有滚动效果的图片，轮换播放及渐变滑动。通常是为了更好地进行展示，比如京东首页的滚动广告大图片，充分利用这一网页效果，能够凸显网站的影响力，达到事半功倍的效果。轮播图默认情况下是循环向左滚动轮播，如果单击下方小圆点的话，会直接显示所单击的那张图。

1 轮播图的原理

一系列的大小相等的图片平铺，利用CSS布局只显示一张图片，其余隐藏。为了实现轮播，可以通过Javascript编程计算偏移量并利用定时器实现自动播放，或通过手动点击事件切换图片。也可以通过jQuery或Bootstrap框架来定义轮播。

2 实现方法一：JS来实现

2.1 HTML布局

这里我们以3张图的轮播为例，分别为3个城市的风景图。当从最后一张图切换回第一张图时，会有较大的空白，需要利用前后两张图来填补这个空白，即实现无缝切换。在HTML布局的代码中，复制最后一张图片放置第一张图片前，同时复制第一张图片放置最后一张图片的后面。

<；

>；

2.2 轮播的JS代码

window.onload = function（） {

var container = document.getElementById（'container'）；

var list = document.getElementById（'list'）；

var buttons = document.getElementById（'buttons'）.

getElementsByTagName（'span'）；

var prev = document.getElementById（'prev'）；

var next = document.getElementById（'next'）；

var index =0；

var timer；

function animate（offset） {

//獲取的是style.left，是相对左边获取距离，第一张图后style.left都为负值

var newLeft = parseInt（list.style.left） + offset；

list.style.left = newLeft + 'px'；

if （newLeft > -600） {

list.style.left = -1800 + 'px'；

}

if （newLeft < -1800） {

list.style.left = -600 + 'px'；

}}

function play（） {

//设置定时器

timer = setInterval（function（） {

next.onclick（）；

}， 2000）

}

function stop（） {

clearInterval（timer）；

}

function buttonsShow（） {

for （var i = 0； i < buttons.length； i++） {

if （buttons[i].className == "active"） {

buttons[i].className = ""；

}}

buttons[index].className = "active"；

}

prev.onclick = function（） {

index -= 1；

//判断index的值

if （index < 0） {

index =2；

}

buttonsShow（）；

animate（600）；

}；

next.onclick = function（） {

index += 1；

if （index > 2） {

index =0；

}

animate（-600）；

buttonsShow（）；

}；

for （var i = 0； i < buttons.length； i++） {

（function（i） {

buttons[i].onclick = function（） {

var clickIndex = parseInt（this.getAttribute（'index'））；

var offset = 600 * （index - clickIndex）； //当前图片停留时的index

animate（offset）；

index = clickIndex； //存放鼠标点击后位置，用于小圆点的正常显示

buttonsShow（）；

}

}）（i）

}

container.onmouseover = stop； //鼠标悬停则停止自动轮播

container.onmouseout = play； //鼠标离开则继续轮播

play（）；

}

3 实现方法二：Bootstrap框架来实现

Bootstrap是一个基于HTML5和CSS3的前端开发框架，它提供了较为丰富的web组件，能够快速地搭建一个漂亮、功能完备的网站和管理系统。同时Bootstrap也提供较为丰富的jQuery插件。在使用Bootstrap时，需要在页面中引用Bootstrap.css样式，如果要使用到相应的组件，还要引入jQuery.js以及Bootstrap.js文件。jQuery.js必须在Bootstrap.js文件之前引入，因为在Bootstrap中插件是以jQuery为基础的，而浏览器中js是顺序加载解析的。

3.1 Bootstrap框架引入

在标记中引入css文件，代码如下：

在标记中引入js文件，代码如下：

3.2 轮播图实现代码

//轮播图的计数器，即圆圈指示符

//设置轮播图片

//图片文字

New York

Chicago

//左右控制器

兩种方法效果类似，运行如下图（3张图依次轮播）：

4 结束语

除了以上探讨的两种方法，用jQuery来实现轮播也非常常见。Web前端开发的三个基本要素仍然是：HTML、CSS和JavaScript，但“会做网页”不等于“前端开发”，前端开发是写代码的，是用代码来构建网页界面和交互，终极阶段是Note.js全栈开发。

前端开发的入门门槛相对较低，与服务器端语言先慢后快的学习曲线相比，前端开发的学习曲线是先快后慢。另一方面，从就业角度来说，前端开发是个非常新的职业，对一些规范还处于探索阶段。目前总有新的灵感和技术不时闪现出来，各种JavaScript框架层出不穷，比较主流的例如react 和 vue等，但JS仍然是最重要的组成部分。

参考文献：

[1] 徐涛. 深入理解Bootstrap[M]. 北京：机械工业出版社， 2015： 264-270.

[2] 贺臣，陈鹏. Bootstrap基础教程[M]. 北京：电子工业出版社， 2016： 209-215.

[3] 刘彦佐. 手把手原生js简单轮播图[EB/OL].http：//www.cnblogs.com/LIUYANZUO/p/5679753.html.

随便看

科学优质学术资源、百科知识分享平台，免费提供知识科普、生活经验分享、中外学术论文、各类范文、学术文献、教学资料、学术期刊、会议、报纸、杂志、工具书等各类资源检索、在线阅读和软件app下载服务。