html
<body>
<div class="box banner1">
<div class="imgbox">
<img src="" >
<img src="" >
<img src="" >
<img src="" >
</div>
<div class="btns">
<input type="button" id="left" value="<<<">
<input type="button" id="right" value=">>>">
</div>
</div>
</body>
<script src="../jquery.2.2.4.js"></script>
<script src="jquery.banner.js"></script>
<script>
// 两个script的顺序不能变。
$(".banner1").banner({
items:$(".imgbox").children(),
left:$("#left"),
right:$("#right"),
list:true,//(true 和不写默认都是有的) //true自动生成list
autoplay:true,//(true 和不写默认都是有的) 支持自动播放
delayTime:3000, //即延迟3s
moveTime:300//不传就是200,一张多久走完
});
</script>
js文件
;(function($){
"use strict";
// 合并方法
// $.banner = function(){}
// $.fn.banner = function(){}
// $.extend({banner:function(){}})
// $.fn.extend({banner:function(){}})
// $.extend($,{banner:function(){}})
// $.extend($.fn,{banner:function(){}})
// 默认参数处理放在options里了
$.fn.banner=function(options){
var {list,items,left,right,autoplay,delayTime,moveTime}=options
// 判断left有没有
if(left!=undefined &&left.length>0&&right!=undefined&&right.length>0){
console.log("有左右按钮")
}
list=list===false?false:true;
autoplay=autoplay===false?false:true;
delayTime=delayTime||200;
moveTime=moveTime||200;
// 方法在哪一个选择器执行， this就指向哪一个大选择器，是jQuery内的不需要加$
console.log(this)//jQuery.fn.init [div.box.banner1, prevObject: jQuery.fn.init(1), context: document, selector: ".banner1"]
}
})(jQuery);