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 相关文章推荐
JS加ASP二级域名转向的代码
May 17 Javascript
分享别人写的一个小型js框架
Aug 13 Javascript
javascript 词法作用域和闭包分析说明
Aug 12 Javascript
Jquery+ajax请求data显示在GridView上(asp.net)
Aug 27 Javascript
基于javascript实现九九乘法表
Mar 27 Javascript
JavaScript常用字符串与数组扩展函数小结
Apr 24 Javascript
VUE实现表单元素双向绑定(总结)
Aug 08 Javascript
angular2路由之routerLinkActive指令【推荐】
May 30 Javascript
JavaScript设计模式之观察者模式(发布订阅模式)原理与实现方法示例
Jul 27 Javascript
webpack4 入门最简单的例子介绍
Sep 05 Javascript
Vue的click事件防抖和节流处理详解
Nov 13 Javascript
解决vue 给window添加和移除resize事件遇到的坑
Jul 21 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
简单介绍下 PHP5 中引入的 MYSQLI的用途
2007/03/19 PHP
php中支持多种编码的中文字符串截取函数!
2007/03/20 PHP
PHP循环遍历数组的3种方法list()、each()和while总结
2014/11/19 PHP
php操作xml入门之cdata区段
2015/01/23 PHP
PHP实现针对日期,月数,天数,周数,小时,分,秒等的加减运算示例【基于strtotime】
2017/04/19 PHP
PHP实现的ID混淆算法类与用法示例
2018/08/10 PHP
JavaScript高级程序设计(第3版)学习笔记9 js函数(下)
2012/10/11 Javascript
javascript获取鼠标位置部分的实例代码(兼容IE,FF)
2013/08/05 Javascript
Angularjs注入拦截器实现Loading效果
2015/12/28 Javascript
有关jQuery中parent()和siblings()的小问题
2016/06/01 Javascript
Angularjs 创建可复用组件实例代码
2016/10/09 Javascript
jquery+html仿翻页相册功能
2016/12/20 Javascript
微信小程序(三):网络请求
2017/01/13 Javascript
JS跨域请求外部服务器的资源
2017/02/06 Javascript
Node.js爬虫如何获取天气和每日问候详解
2019/08/26 Javascript
微信小程序中网络请求缓存的解决方法
2019/12/29 Javascript
[45:25]OG vs EG 2019国际邀请赛淘汰赛 胜者组 BO3 第一场 8.22
2019/09/05 DOTA
Python利用正则表达式匹配并截取指定子串及去重的方法
2015/07/30 Python
Python实现多条件筛选目标数据功能【测试可用】
2018/06/13 Python
pandas修改DataFrame列名的实现方法
2019/02/22 Python
Python 二叉树的层序建立与三种遍历实现详解
2019/07/29 Python
python 实现字符串下标的输出功能
2020/02/13 Python
python字典key不能是可以是啥类型
2020/08/04 Python
Python 常用日期处理 -- calendar 与 dateutil 模块的使用
2020/09/02 Python
python实现感知机模型的示例
2020/09/30 Python
Python通过Schema实现数据验证方式
2020/11/12 Python
python之随机数函数的实现示例
2020/12/30 Python
宝信软件JAVA工程师面试经历
2012/08/19 面试题
J2EE面试题大全
2016/08/06 面试题
大学系主任推荐信范文
2013/12/24 职场文书
给实习单位的感谢信
2014/02/01 职场文书
爱心捐书活动总结
2014/07/05 职场文书
2014年国庆节演讲稿精选范文1500字
2014/09/25 职场文书
2015年乡镇纪检工作总结
2015/04/22 职场文书
信仰观后感
2015/06/03 职场文书
分析并发编程之LongAdder原理
2021/06/29 Java/Android