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

本文实例讲述了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');