1、引入JQ
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
2、開始創建，提示：fn = prototype，也可以用 extend({})
<script>
(function(jq){
//這是jq.fn、jq.prototype的方法
jq.fn.banner = function(arr){
//這裏是你的插件代碼
console.log(arr); //打印參數
console.log(this); //這this是下面的綁定對象$(".banner")
}
jq.prototype.banner = function(arr){
//這裏是你的插件代碼
console.log(arr); //打印參數
console.log(this); //這this是下面的綁定對象$(".banner")
}
//這是內置的extend({})的方法
jq.fn.extend({
banner : function(arr){
//這裏是你的插件代碼
console.log(arr); //打印參數
console.log(this); //這this是下面的綁定對象$(".banner")
}
})
})(jQuery);
</script>
<script>
//這是內置的extend({})的方法
jQuery.extend({
banner : function(arr){
//這裏是你的插件代碼
console.log(arr); //打印參數
console.log(this); //這this是下面的綁定對象$(".banner")
}
})
</script>
3、使用插件
<script>
$(".banner").banner({屬性:值});
</script>
演示代碼：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Banner</title>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
<body>
<style>
body{margin:0px;}
ul{list-style:none;margin:0px; padding:0px;}
.banner {width:100%;height:400px;overflow:hidden;position:relative;}
.banner ul li{display:none;}
.banner ul li img{ width:100%;}
.banner_btn_left,.banner_btn_right{font-size:20px;position:absolute;z-index:999;background:#ffffff;top:50%;margin-top:-25px;cursor:pointer;text-align:center;}
.banner_btn_left{left:0px;}
.banner_btn_right{right:0px;}
.banner_page{position:absolute;bottom:20px;width:100%;}
.banner_page dl{ margin:0 auto;text-align:center;}
.banner_page dl dt{display:inline-block; width:50px; height:6px; background:#CCC; margin:0 10px; cursor:pointer;}
.banner_page dl dt.dian{background:#000000;}
</style>
</head>
<div class="banner">
<ul>
<li><img src="https://img.tukuppt.com//ad_preview/00/05/64/5c98dce2ca6db.jpg"/></li>
<li><img src="https://img.tukuppt.com//ad_preview/00/05/64/5c98dce2ca6db.jpg"/></li>
<li><img src="https://img.tukuppt.com//ad_preview/00/05/64/5c98dce2ca6db.jpg"/></li>
</ul>
<div class="banner_btn"><a class="banner_btn_left">《</a><a class="banner_btn_right">》</a></div>
<div class="banner_page"><dl></dl></div>
</div>
<script>
(function(jq){
jq.fn.banner = function(arr){
//console.log(arr);打印參數
var time=arr.time;//切換時間
var autoplay=arr.autoplay;//是否自動切換
//console.log(this);//打印當前對象
var that=$(this);//獲取Banner
var imglist=that.find("li");//獲取圖片列表
var left_btn=that.find(".banner_btn_left");
var right_btn=that.find(".banner_btn_right");
//創建分頁
var pagestr="";
for(var i=0;i<imglist.length;i++){
i==0?pagestr += "<dt class='dian'></dt>":pagestr += "<dt></dt>";//三元運算，默認第一個加狀態
}
that.find("dl").append(pagestr);
var page_btn=that.find("dt");
//默認第一個顯示並且添加class
that.find("li:first").show().addClass("on");
//箭頭切換方法
var arrow=function(type){
var a=that.find(".on");
var b=that.find(".dian");
if(type=="left"){
a.prev().addClass("on").stop().fadeIn();
b.prev().addClass("dian");
//如果切換到頭了就尾開始
if(a.prev().length==0){
that.find("li:last").addClass("on").stop().fadeIn();
that.find("dt:last").addClass("dian");
}
}
if(type=="right"){
a.next().addClass("on").stop().fadeIn();
b.next().addClass("dian");
//如果切換到尾了就頭開始
if(a.next().length==0){
//如果切換到尾了就頭開始
that.find("li:first").addClass("on").stop().fadeIn();
that.find("dt:first").addClass("dian");
}
}
a.removeClass("on").stop().fadeOut();
b.removeClass("dian");
}
//分頁切換方法
var page=function(){
var index = $(this).index();
var c= imglist.eq(index);
c.addClass("on");
c.siblings().removeClass("on");
c.stop().fadeIn();
c.siblings().stop().fadeOut();
$(this).addClass("dian");
$(this).siblings().removeClass("dian");
}
//左按鈕
left_btn.on("click",function(){arrow("left")});
//右按鈕
right_btn.on("click",function(){arrow("right")});
//分頁按鈕
page_btn.on("mouseover",page);
//自動切換
function autoPlay(){
var getplay = setInterval(function(){arrow("right")},time);
};
if(autoplay==true){
autoPlay();
}
}
})(jQuery);
</script>
<script>
$(".banner").banner({time:5000,autoplay:true});
</script>
</body>
</html>