标题 | 网页中轮播图的实现方法探讨 |
范文 | 龚丽 摘要:轮播图是指网页中一些带有滚动效果的图片,轮换播放及渐变滑动。充分利用该一网页效果,能够凸显网站的影响力,达到事半功倍的效果。轮播图默认情况下是循环向左滚动轮播,如果单击下方小圆点的话,会直接显示所单击的那张图。实现轮播有多种方法,该文主要讨论用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
LA
//左右控制器
兩种方法效果类似,运行如下图(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下载服务。