欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-06-22 14:10:34
本文实例讲述了javascript基于面向对象实现的无缝滚动轮播。分享给大家供大家参考,具体如下: 无缝轮播 面向对象 一、html及css部分同前文《原生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');