组件编写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>