网站首页  词典首页

请输入您要查询的论文:

 

标题 网页中轮播图的实现方法探讨
范文

    龚丽

    摘要:轮播图是指网页中一些带有滚动效果的图片,轮换播放及渐变滑动。充分利用该一网页效果,能够凸显网站的影响力,达到事半功倍的效果。轮播图默认情况下是循环向左滚动轮播,如果单击下方小圆点的话,会直接显示所单击的那张图。实现轮播有多种方法,该文主要讨论用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布局的代码中,复制最后一张图片放置第一张图片前,同时复制第一张图片放置最后一张图片的后面。

    

    
1
1
2
3
3

    

    

    

    <;

    >;

    

    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下载服务。

 

Copyright © 2004-2023 puapp.net All Rights Reserved
更新时间:2025/3/15 22:00:10