<div class="wrapper" id="wrapper">

    <ul class="tab" id="tab-menu">

        <li class="tab-item active">国际大牌<span>◆</span></li>

        <li class="tab-item">国妆名牌<span>◆</span></li>

        <li class="tab-item">清洁用品<span>◆</span></li>

        <li class="tab-item">男士精品</li>

    </ul>

    <div class="products" id="tab-main">

        <div class="main selected">

            <a href="###"><img src="imgs/guojidapai.jpg" alt=""/></a>

        </div>

        <div class="main">

            <a href="###"><img src="imgs/guozhuangmingpin.jpg" alt=""/></a>

        </div>

        <div class="main">

            <a href="###"><img src="imgs/qingjieyongpin.jpg" alt=""/></a>

        </div>

        <div class="main">

            <a href="###"><img src="imgs/nanshijingpin.jpg" alt=""/></a>

        </div>

    </div>

</div>

var tb = new Tab({

        tabMenu: "tab-menu",    // 指定tab栏菜单id

        tabMain: "tab-main",    // 指定tab栏内容id

        auto: true           // 是否自动播放

    });

function Tab(obj) {

    this.tabMenus = null;

    this.tabMains = null;

    if(obj) {

        this._init(obj);

    }

}

Tab.prototype = {

    constructor: Tab,

    timer : null,

    _init:function(obj){

        this.initEle(obj);

        this.click();

        if(obj.auto){

            this.autoPlay();

        }

    },

    initEle:function(obj){

        var tabMenu = document.getElementById(obj.tabMenu);

        var tabMain = document.getElementById(obj.tabMain);

        this.tabMenus = tabMenu.children;

        this.tabMains = tabMain.children;

    },

    click: function() {

        var that = this;

        for(var i=0,len=this.tabMenus.length;i<len;i++) {

            this.tabMenus[i].onclick = function(){

                that.show(this);

                that.autoPlay(this.index);

            }

        }

    },

    show: function(currentLi) {

        for(var i=0,len=this.tabMenus.length;i<len;i++) {

            this.tabMenus[i].index = i;

            this.tabMenus[i].className = "tab-item";

            this.tabMains[i].style.display = "none";

        }

        currentLi.className += " active";

        this.tabMains[currentLi.index].style.display = "block";

    },

    autoPlay: function(currentIndex){

        var that = this;

        var index = 0;

        if(currentIndex !== undefined && currentIndex !== ""){

            index = currentIndex;

        }

        clearInterval(this.timer);

        this.timer = setInterval(function(){

            index++;

            if(index == that.tabMenus.length){

                index = 0;

            }

            that.show(that.tabMenus[index]);

        },2000);

    }

}