JavaScript基于面向对象实现的无缝滚动轮播示例


Posted in Javascript onJanuary 17, 2020

本文实例讲述了JavaScript基于面向对象实现的无缝滚动轮播。分享给大家供大家参考,具体如下:

无缝轮播 面向对象

一、HTML及CSS部分同前文《原生JavaScript实现的无缝滚动功能》。

JavaScript面向对象部分如下:

function Seamless(obj) {
  this.obj = document.getElementById(obj);
  this.oXSlide = GLOBAL.Dom.getElementsByClassName('J_XSlide', this.obj)[0];
  this.li = this.oXSlide.getElementsByTagName('li');
  this.liTabs = GLOBAL.Dom.getElementsByClassName('tabs', this.obj)[0].getElementsByTagName('li');
  this.iNow = 0;
  this.timer = null;
  this.playTime = 2000;
  this.init();
}
Seamless.prototype = {
  // 初始化
  init: function() {
    var _this = this;
    this.timer = setInterval(function(){
      _this.autoPlay();
    }, this.playTime);
    this.overOut();
    this.tab();
  },
  tab: function() {
    var _this = this;
    var btn = GLOBAL.Dom.getElementsByClassName('btn', this.obj);
    this.oXSlide.style.width = this.li.length * this.li[0].offsetWidth + 'px';
    for(var i = 0, len = this.liTabs.length; i < len; i++) {
      this.liTabs[i].index = i;
      GLOBAL.Event.addHandler(this.liTabs[i], 'mouseover', function() {
        _this.showItem(this.index);
      });
    }
    GLOBAL.Event.addHandler(btn[0], 'click', function() {
      _this.moveLeft();
    });
    GLOBAL.Event.addHandler(btn[1], 'click', function() {
      _this.moveRight();
    });
  },
  // 移入移出时,轮播暂停与开始
  overOut: function() {
    var _this = this;
    GLOBAL.Event.addHandler(this.obj, 'mouseover', function() {
      clearInterval(_this.timer);
    });
    GLOBAL.Event.addHandler(this.obj, 'mouseout', function() {
      _this.timer = setInterval(function() {
        _this.autoPlay();
      }, _this.playTime);
    });
  },
  autoPlay: function() {
    this.moveRight();
  },
  // 选项卡
  showItem:function (n) {
    for(var i = 0, len = this.liTabs.length; i < len; i++) {
      this.liTabs[i].className = 'tab';
    }
    if(n == this.liTabs.length) {
      this.liTabs[0].className = 'tab cur';
    }
    else {
      this.liTabs[n].className = 'tab cur';
    }
    startMove(this.oXSlide, {'left': -n * this.li[0].offsetWidth});
  },
  moveLeft:function () {
    this.iNow--;
    if(this.iNow == -1) {
      this.oXSlide.style.left = -this.liTabs.length * this.li[0].offsetWidth + 'px';
      this.iNow = this.liTabs.length - 1;
    }
    this.showItem(this.iNow);
  },
  moveRight:function () {
    this.iNow++;
    if(this.iNow == this.li.length) {
      this.oXSlide.style.left = 0;
      this.iNow = 1;
    }
    this.showItem(this.iNow);
  }
};
new Seamless('box');

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
防止网站内容被拷贝的一些方法与优缺点好处与坏处分析
Nov 30 Javascript
javascript SocialHistory 检查访问者是否访问过某站点
Aug 02 Javascript
基于jQuery的固定表格头部的代码(IE6,7,8测试通过)
May 18 Javascript
js的压缩及jquery压缩探讨(提高页面加载性能/保护劳动成果)
Jan 29 Javascript
gridview生成时如何去掉style属性中的border-collapse
Sep 30 Javascript
JS实现来回出现文字的状态栏特效代码
Oct 31 Javascript
快速掌握Node.js中setTimeout和setInterval的使用方法
Mar 21 Javascript
微信小程序 页面跳转及数据传递详解
Mar 14 Javascript
vue中前进刷新、后退缓存用户浏览数据和浏览位置的实例讲解
Sep 21 Javascript
基于jQuery的时间戳与日期间的转化
Jun 21 jQuery
加速vue组件渲染之性能优化
Apr 09 Javascript
搭建vscode+vue环境的详细教程
Aug 31 Javascript
JS面向对象之单选框实现
Jan 17 #Javascript
原生JavaScript实现的无缝滚动功能详解
Jan 17 #Javascript
vuejs中父子组件之间通信方法实例详解
Jan 17 #Javascript
React Hooks 实现和由来以及解决的问题详解
Jan 17 #Javascript
详解搭建一个vue-cli的移动端H5开发模板
Jan 17 #Javascript
jQuery实现王者荣耀手风琴效果
Jan 17 #jQuery
JS实现transform实现扇子效果
Jan 17 #Javascript
You might like
PHP中set error handler函数用法小结
2015/11/11 PHP
PHP基于mssql扩展远程连接MSSQL的简单实现方法
2016/10/08 PHP
PHP排序二叉树基本功能实现方法示例
2018/05/26 PHP
Linux下安装Memcached服务器和客户端与PHP使用示例
2019/04/15 PHP
js form action动态修改方法
2008/11/04 Javascript
来自国外的14个图片放大编辑的jQuery插件整理
2010/10/20 Javascript
16个最流行的JavaScript框架[推荐]
2011/05/29 Javascript
Node.js中使用Buffer编码、解码二进制数据详解
2014/08/16 Javascript
javascript比较两个日期的先后示例代码
2014/12/31 Javascript
jquery实现页面百叶窗走马灯式翻滚显示效果的方法
2015/03/12 Javascript
WordPress中利用AJAX异步获取评论用户头像的方法
2016/01/08 Javascript
Angular.js中$apply()和$digest()的深入理解
2016/10/13 Javascript
jquery 判断div show的状态实例
2016/12/03 Javascript
手机移动端实现 jquery和HTML5 Canvas的幸运大奖盘特效
2016/12/06 Javascript
jQuery validate 验证radio实例
2017/03/01 Javascript
详解Vue2.X的路由管理记录之 钩子函数(切割流水线)
2017/05/02 Javascript
vue+axios 前端实现登录拦截的两种方式(路由拦截、http拦截)
2018/10/24 Javascript
Vue.js实现备忘录功能
2019/06/26 Javascript
VUE 自定义组件模板的方法详解
2019/08/30 Javascript
element中table高度自适应的实现
2020/10/21 Javascript
Python ORM框架SQLAlchemy学习笔记之数据查询实例
2014/06/10 Python
Python os模块学习笔记
2015/06/21 Python
使用Python的urllib2模块处理url和图片的技巧两则
2016/02/18 Python
Python3爬虫学习之应对网站反爬虫机制的方法分析
2018/12/12 Python
python中使用ctypes调用so传参设置遇到的问题及解决方法
2019/06/19 Python
Python+selenium点击网页上指定坐标的实例
2019/07/05 Python
python文字转语音的实例代码分析
2019/11/12 Python
python中翻译功能translate模块实现方法
2020/12/17 Python
荷兰鞋类购物网站:Donelli
2019/05/24 全球购物
信息科学与技术专业求职信范文
2014/02/20 职场文书
2014年基层党组织公开承诺书
2014/03/29 职场文书
《果园机器人》教学反思
2014/04/13 职场文书
目标责任书格式
2014/07/28 职场文书
2014年加油站工作总结
2014/12/04 职场文书
2015年党风廉政建设责任书
2015/01/29 职场文书
如何开启Apache,Nginx和IIS服务器的GZIP压缩功能
2022/04/29 Servers