本文例項講述了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],function() {
      _this.moveRight();
    });
  },// 移入移出時，輪播暫停與開始
  overOut: function() {
    var _this = this;
    GLOBAL.Event.addHandler(this.obj,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查詢演算法技巧總結》、《JavaScript動畫特效與技巧彙總》、《JavaScript錯誤與除錯技巧總結》、《JavaScript資料結構與演算法技巧總結》、《JavaScript遍歷演算法與技巧總結》及《JavaScript數學運算用法總結》

希望本文所述對大家JavaScript程式設計有所幫助。