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 相关文章推荐
JavaScript数字和字符串转换示例
Mar 26 Javascript
javascript中call,apply,bind的用法对比分析
Feb 12 Javascript
基于Jquery制作图片文字排版预览效果附源码下载
Nov 18 Javascript
BootStrap栅格系统、表单样式与按钮样式源码解析
Jan 20 Javascript
微信小程序对接七牛云存储的方法
Jul 30 Javascript
react中fetch之cors跨域请求的实现方法
Mar 14 Javascript
微信小程序使用npm支持踩坑
Nov 07 Javascript
JS实现数组去重,显示重复元素及个数的方法示例
Jan 21 Javascript
jquery绑定事件 bind和on的用法与区别分析
May 22 jQuery
JS中的继承操作实例总结
Jun 06 Javascript
微信小程序实现拨打电话功能的示例代码
Jun 28 Javascript
对vuex中store和$store的区别说明
Jul 24 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中通过ADODB库实现调用Access数据库之修正版本
2006/12/31 PHP
php中session_unset与session_destroy的区别分析
2011/06/16 PHP
php使用百度翻译api示例分享
2014/01/31 PHP
ThinkPHP3.1.3版本新特性概述
2014/06/19 PHP
php字符比较函数similar_text、strnatcmp与strcasecmp用法分析
2014/11/18 PHP
Laravel 5 框架入门(四)完结篇
2015/04/09 PHP
ThinkPHP使用Ueditor的方法详解
2016/05/20 PHP
PHP设置images目录不充许http访问的方法
2016/11/01 PHP
PHP面向对象程序设计之多态性的应用示例
2018/12/19 PHP
JS 控制CSS样式表
2009/08/20 Javascript
jQuery:delegate中select()不起作用的解决方法(实例讲解)
2014/01/26 Javascript
jquery、js操作checkbox全选反选
2014/03/12 Javascript
javascript日期格式化方法汇总
2015/10/04 Javascript
详解js中class的多种函数封装方法
2016/01/03 Javascript
jquery输入数字随机抽奖特效的简单实现代码
2016/06/10 Javascript
jquery自定义表单验证插件
2016/10/12 Javascript
JS调用Android、Ios原生控件
2017/01/06 Javascript
详解Vue中使用v-for语句抛出错误的解决方案
2017/05/04 Javascript
Angular2搜索和重置按钮过场动画
2017/05/24 Javascript
Agularjs妙用双向数据绑定实现手风琴效果
2017/05/26 Javascript
layuiAdmin循环遍历展示商品图片列表的方法
2019/09/16 Javascript
Python读写Excel文件的实例
2013/11/01 Python
Python 40行代码实现人脸识别功能
2017/04/02 Python
Python实现PS图像抽象画风效果的方法
2018/01/23 Python
Python 数据可视化pyecharts的使用详解
2019/06/26 Python
用python打印1~20的整数实例讲解
2019/07/01 Python
Python 识别12306图片验证码物品的实现示例
2020/01/20 Python
tensorflow实现测试时读取任意指定的check point的网络参数
2020/01/21 Python
详解selenium + chromedriver 被反爬的解决方法
2020/10/28 Python
工程监理应届生求职信
2013/11/09 职场文书
团日活动总结模板
2014/06/25 职场文书
大学运动会加油稿200字(5篇)
2014/09/27 职场文书
管理失职检讨书范文
2015/05/05 职场文书
幼儿园重阳节活动总结
2015/05/05 职场文书
2016猴年春节慰问信
2015/11/30 职场文书
教你怎么用python实现字符串转日期
2021/05/24 Python