无缝轮播 面向对象版本

无缝轮播 面向对象

一、HTML及CSS部分同《无缝滚动 原生JavaScript》，链接如下：

无缝滚动 原生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');