码迷,mamicode.com
首页 > Web开发 > 详细

js插件编程-tab框

时间:2018-02-08 20:15:31      阅读:241      评论:0      收藏:0      [点我收藏+]

标签:init   htm   hidden   conf   name   children   play   span   one   

JS代码

(function (w) {
    //tab对象
    function Tab(config) {
        //定义变量,防止变量污染
        this.tabMenus=null;
        this.tabMains=null;
        if(config){
            this._init(config);
        }
    }
    //为原型添加属性,防止内存重复创建
    Tab.prototype={
        _init:function (config) {
            //初始化元素
            this.initElements(config);
            this.initEvent();
            if(config.auto){
                this.autoPlay();
            }
        },
        initElements:function (config) {
            var tabMenu=document.getElementById(config.tabMenu);
            var tabMain=document.getElementById(config.tabMain);

            this.tabMenus=tabMenu.children;
            this.tabMains=tabMain.children;
        },
        initEvent:function () {
            for(var i=0;i<this.tabMenus.length;i++){
                var li=this.tabMenus[i];
                li.index=i;
                //定义this变量存储,闭包环境可以调用此变量
                var that=this;
                li.onclick=function () {
                    that.change(this);
                }
            }
        },
        change:function (tabMenu) {
            for(var i=0;i<this.tabMenus.length;i++){
                this.tabMenus[i].className="";
                this.tabMains[i].className="main";
            }
            tabMenu.className="active";
            this.tabMains[tabMenu.index].className+=" select";
        },
        autoPlay:function () {
            var index=0;
            var that=this;
            setInterval(function () {
                index++;
                if(index>=that.tabMenus.length){
                    index=0;
                }
                that.change(that.tabMenus[index]);
            },2000);
        }
    }
    //将插件暴露给windows
    w.Tab=Tab;
})(window)

 

HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="tab.css">
</head>
<body>
    <div class="wrapper">
        <ul class="tab" id="menu">
            <li class="active">国际大牌<span>◆</span></li>
            <li>国妆名牌<span>◆</span></li>
            <li>清洁用品<span>◆</span></li>
            <li>男士精品</li>
        </ul>
        <div class="products" id="main">
            <div class="main select"><a href="#"><img src="imgs/guojidapai.jpg"></a></div>
            <div class="main"><a href="#"><img src="imgs/guozhuangmingpin.jpg"></a></div>
            <div class="main"><a href="#"><img src="imgs/qingjieyongpin.jpg"></a></div>
            <div class="main"><a href="#"><img src="imgs/nanshijingpin.jpg"></a></div>
        </div>
    </div>
</body>
<script type="text/javascript" src="tab.js"></script>
<script>
    var tb=new Tab({
        tabMenu:"menu",
        tabMain:"main",
        auto:true
    });
</script>
</html>

css代码

 html,body,ul,li {
     margin: 0;
     padding: 0;
 }
 ul{
     list-style: none;
 }
 .wrapper {
     margin: 0 auto;
     width: 1000px;
     height: 475px;
     margin-top: 100px;
 }
 .wrapper .tab {
     width: 320px;
     height: 36px;
     border: 1px solid #ddd;
     border-bottom: 0;
 }
 .wrapper .tab li{
     float:left;
     width: 80px;
     height: 34px;
     line-height: 34px;
     cursor: pointer;
     text-align: center;
     border-top: 4px solid #fff;
     position: relative;
 }
 .wrapper .tab .active{
     border-top: 4px solid red;
 }
 .wrapper .tab span{
     width: 1px;
     height: 14px;
     background-color: #ddd;
     position: absolute;
     right:0px;
     top:10px;
     overflow: hidden;
 }
 .wrapper .products{
     width: 1002px;
     height: 476px;
     border:1px solid #ddd;
 }

 .wrapper .products .main{
     float: left;
     display: none;
 }
 .wrapper .products .select{
     display: block;
 }

 

js插件编程-tab框

标签:init   htm   hidden   conf   name   children   play   span   one   

原文地址:https://www.cnblogs.com/zhuyapeng/p/8432460.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!