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

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