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 相关文章推荐
JQuery 获得绝对,相对位置的坐标方法
Feb 09 Javascript
jquery URL参数判断,确定菜单样式
May 31 Javascript
用js控制组织结构图可以任意拖拽到指定位置
Jan 17 Javascript
javascript动态判断html元素并执行不同的操作
Jun 16 Javascript
jQuery取得iframe中元素的常用方法详解
Jan 14 Javascript
js实现图片淡入淡出切换简易效果
Aug 22 Javascript
JS简单获取客户端IP地址的方法【调用搜狐接口】
Sep 05 Javascript
js实现的在线调色板功能完整实例
Dec 21 Javascript
老生常谈JavaScript获取CSS样式的方法(兼容各浏览器)
Sep 19 Javascript
Node.JS枚举统计当前文件夹和子目录下所有代码文件行数
Aug 23 Javascript
layui form.render('select', 'test2') 更新渲染的方法
Sep 27 Javascript
vue中实现点击空白区域关闭弹窗的两种方法
Dec 30 Vue.js
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管理内存函数 memory_get_usage()使用介绍
2012/09/23 PHP
解析file_get_contents模仿浏览器头(user_agent)获取数据
2013/06/27 PHP
PHP使用mysql_fetch_row查询获得数据行列表的方法
2015/03/18 PHP
转自Jquery官方 jQuery1.1.3发布,速度提升800%,体积保持20K
2007/08/19 Javascript
JavaScript中实现最高效的数组乱序方法
2014/10/11 Javascript
简述JavaScript中正则表达式的使用方法
2015/06/15 Javascript
Jquery Ajax Error 调试错误的技巧
2015/11/20 Javascript
JavaScript基础知识之方法汇总结
2016/01/24 Javascript
jquery中键盘事件小结
2016/02/24 Javascript
jQuery.datatables.js插件用法及api实例详解
2016/10/28 Javascript
js 获取html5的data属性实现方法
2017/07/28 Javascript
js处理包含中文的字符串实例
2017/10/11 Javascript
用Webpack构建Vue项目的实践
2017/11/07 Javascript
详解jQuery获取特殊属性的值以及设置内容
2018/11/14 jQuery
解决layui的form里的元素进行动态生成,验证失效的问题
2019/09/14 Javascript
Python实现向QQ群成员自动发邮件的方法
2014/11/19 Python
让Python代码更快运行的5种方法
2015/06/21 Python
Python实现提取谷歌音乐搜索结果的方法
2015/07/10 Python
使用urllib库的urlretrieve()方法下载网络文件到本地的方法
2018/12/19 Python
Python中的枚举类型示例介绍
2019/01/09 Python
对PyQt5基本窗口控件 QMainWindow的使用详解
2019/06/19 Python
利用pandas将非数值数据转换成数值的方式
2019/12/18 Python
Pytorch之扩充tensor的操作
2021/03/04 Python
css3 响应式媒体查询的示例代码
2019/09/25 HTML / CSS
Expedia丹麦:全球领先的旅游网站
2018/03/18 全球购物
Cotton On香港网站:澳洲时装连锁品牌
2018/11/01 全球购物
幼儿园秋游活动方案
2014/01/21 职场文书
教师节演讲稿
2014/05/06 职场文书
群众路线教育实践活动个人对照检查材料
2014/09/22 职场文书
基层党支部承诺书
2015/04/30 职场文书
大学升旗仪式主持词
2015/07/04 职场文书
初一军训感言
2015/08/01 职场文书
2016反腐倡廉警示教育心得体会
2016/01/13 职场文书
承诺书的内容有哪些,怎么写?
2019/06/21 职场文书
CSS预处理框架——Stylus
2021/04/21 HTML / CSS
SpringBoot Http远程调用的方法
2022/08/14 Java/Android