组件编写3-----对象生成组件

最新推荐文章于 2022-09-13 21:22:44 发布

a263531947

最新推荐文章于 2022-09-13 21:22:44 发布

阅读量330

点赞数 1

文章标签： html

本文链接：https://blog.csdn.net/a263531947/article/details/52972126

版权

js 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

组件编写1—–使用JQ生成组件

组件编写2—–执行方法生成组件

这种编写方式比较普遍，通过new一个方法来获取一个对象，在这个方法里面，this.xxx的，则为共有方法，外部可以调用；不带this，则是私有方法，外部调用不了。

function Person(option){
    var name = option;
    this.getName = function(){
        console.log("名字:" + name)
    }
    this.setName = function(n){
        name = n;
    }
    var getColor = function(){
        console.log("输出颜色")
    }
}
var man = new Person("Jack");
man.getName();  //输出Jack
man.setName("Ben"); 
man.getName();  //输出Ben

getColor(); //getColor is not defined

或者可以使用prototype来添加新方法，这种写法的好处是把外面的方法变成自己的公有方法，一个方法各个对象都能使用，但这种写法别人阅读的时候没那么友好，找它初始化的方法不容易。

function Person(option){
    var name = option;
    this.getName = function(){
        console.log("名字:" + name)
    }
    this.setName = function(n){
        name = n;
    }
    var getColor = function(){
        console.log("输出颜色")
    }
}
//新添加的方法
Person.prototype.explain = function(){
    console.log("我是一个人类")
}
var man = new Person("Jack");
man.getName();  //输出Jack
man.setName("Ben"); 
man.getName();  //输出Ben

man.explain();  //输出我是一个人类

下面是一个轮播的demo，初始化后可以自动轮播，点击原点、左右按钮可以切换；并提供切换后的回调；生成对象后，还可以调用stop_going开始和continue_going禁止自动轮播。

<!DOCTYPE html>
<html lang="zh" >
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>组件开发3----对象生成组件</title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<style>
*{margin:0;padding:0;}
ul,li{list-style: none;}

/* banners */
.banners{position:relative;overflow: hidden;height:200px;}
.banners .b-container{position: relative;left:0;font-size:0;white-space: nowrap;width:100%;height:100%;
    transition: all 0.5s ease;-webkit-transition: all 0.5s ease;-moz-transition: all 0.5s ease;
}
.banners .b-container .power{background:pink;}
.banners .b-container .power.power1{background:blue;}
.banners .b-container .power.power2{background:gray;}
.banners .b-container .power.power3{background:yellow;}
.banners .b-container >li{position: absolute;left:0px;top:0px;width:100%;opacity:0;height:100%;font-size:18px;
    transition: all 0.5s ease;-webkit-transition: all 0.5s ease;-moz-transition: all 0.5s ease;
}
.banners .b-container >li.select{opacity:1;z-index:2;}
.banners .banners .dotsArea{position:absolute;bottom:20px;left:50%;z-index:5;
    -webkit-transform: translateX(-50%);-moz-transform: translateX(-50%);transform: translateX(-50%);
}
.banners .dotsArea > li{display:inline-block;vertical-align:middle;width:12px;height:12px;margin-left:10px;cursor:pointer;}
.banners .dotsArea > li:first-child{margin-left:0;}
.banners .dotsArea .dot{width:100%;height:100%;background:#fff;border-radius: 100%;box-sizing:border-box;}
.banners .dotsArea > li.select .dot{background:none;border: 1px solid #7389af;}
.banners .dotsArea > li.select{cursor: initial;}

.banners .direct{position: absolute;top:50%;background:#b13535;color:#fff;padding:5px;cursor: pointer;z-index:5;
    -webkit-transform: translateY(-50%);-moz-transform: translateY(-50%);transform: translateY(-50%);
}
.banners .direct.direct_left{left:0;}
.banners .direct.direct_right{right:0;}
</style>
<script>
//banner
function myBanner(option){
    var obj = this;
    var o = {
        box : null,
        interval : 2000,
        changeBack : null
    }
    var bigInter = null;    //自动执行
    //移动的方法
    var moving=function(obj,direct){
        var thisWid=obj.width();    //每个页面的长度
        var showNum=obj.children("li.select").index();  //获取当前显示域的索引
        if(direct === 1 && (showNum+1)>=obj.children("li").length){ //下一个
            return false;
        }
        if(direct === -1 && (showNum)<=0){  //上一个
            return false;
        }
        if(direct === "moving"){    //自动循环
            if((showNum+1)<obj.children("li").length){  //向右移动
                moving(obj,+1);
                return false;
            }else{  //返回第一个
                direct=0;
                showNum=0;
            }
        }
        o.changeBack && o.changeBack.call(o.box[0],(showNum+direct));   //执行回调
        obj.children("li").eq(showNum+direct).addClass("select").siblings("li").removeClass("select");
        obj.siblings(o.box.find(".dotsArea")).children("li").eq(showNum+direct).addClass("select").siblings("li").removeClass("select");
    }
    //初始化原点
    function _init_dots(){
        var str = '';
        var len = o.box.find(".b-container li").length;
        var select_num = o.box.find(".b-container li.select").index();
        for(var i=0;i<len;i++){
            if(i == select_num){
                str += '<li class="select">'
                        +'<div class="dot"></div>'
                    +'</li>';
            }else{
                str += '<li>'
                        +'<div class="dot"></div>'
                    +'</li>';
            }
        }
        o.box.find(".dotsArea").empty().append(str);
    }
    //banner的自动执行
    function keep_going(){
        bigInter=window.setInterval(function(){
            moving(o.box.find(".b-container"),"moving");
        },o.interval);
    }
    //关闭banner的自动执行
    function close_going(){
        window.clearInterval(bigInter);
    }

    this.stop_going = function(){
        close_going();
        bigInter = null;
    }

    this.continue_going = function(){
        keep_going();
    }

    function _bind_event(){
        //点击左按钮
        o.box.find(".direct_left").on("click",function(){
            moving(o.box.find(".b-container"),-1);
        });
        //点击右按钮
        o.box.find(".direct_right").on("click",function(){
            moving(o.box.find(".b-container"),+1);
        });
        //进入大图片区，禁止自动滚动
        o.box.on("mouseenter",function(){
            close_going();
        });
        //离开大图片区，开始自动滚动
        o.box.on("mouseleave ",function(){
            if(bigInter !== null){
                keep_going();
            }

        });
        //点击原点
        o.box.find(".dotsArea").delegate("li","click",function(){
            if($(this).hasClass("select")){
                return false;
            }
            var showNum=$(this).index();
            o.box.find(".b-container").children("li").eq(showNum).addClass("select").siblings("li").removeClass("select");
            o.box.find(".b-container").siblings(o.box.find(".dotsArea")).children("li").eq(showNum).addClass("select").siblings("li").removeClass("select");
        });
    }
    function _init(){
        $.extend(o,option);    //初始化对象
        _init_dots();   //初始化原点列表
        _bind_event();  //绑定事件
        keep_going();   //执行自动轮播
    }
    _init();
}

</script>
</head>

<body>
<!--大banner start-->
<div class="banners" id="topBanner">
    <ul class="b-container">
        <li class="power select">
            banner0
        </li>
        <li class="power power1">
            banner1
        </li>
        <li class="power power2">
            banner2
        </li>
        <li class="power power3">
            banner3
        </li>
    </ul>
    <ul class="dotsArea"></ul>
    <span class="direct direct_left">向左</span>
    <span class="direct direct_right">向右</span>
</div>
<!--大banner end-->
<script>
function callback(num){
    console.log(num,this)
}

var data = {
    box : $("#topBanner"),
    interval : 2000,
    changeBack : callback
}

var myDemo = new myBanner(data);    //banner
//myDemo.stop_going();  //禁止自动轮播
//myDemo.continue_going();`//开启自动轮播

</script>
</body>
</html>

这里写图片描述

a263531947

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
组件编写3-----对象生成组件

这种编写方式比较普遍，通过new一个方法来获取一个对象，在这个方法里面，this.xxx的，则为共有方法，外部可以调用；不带this，则是私有方法，外部调用不了。下面是一个轮播的demo，初始化后可以自动轮播，点击原点、左右按钮可以切换；并提供切换后的回调；生成对象后，还可以调用stop_going开始和continue_going禁止自动轮播。<!DOCTYPE html><html lan
复制链接

扫一扫

专栏目录