自定义jquery插件分成三步
//1、定义MyPlugin对象
var MyPlugin = function(ele,opt){
//设置参数
//定义变量
//定义私有方法
}
//2、定义MyPlugin对象的方法
MyPlugin.prototype = {
init:function(){
//调用私有方法
//处理DOM
}
}
//3、定义插件myplugin，在插件中使用MyPlugin对象
$.fn.myplugin = function(options){
//创建MyPlugin的实体
myplug = new MyPlugin(this,options);
//调用其方法
return myplug.init();
}banner插件
html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>banner</title>
<link rel="stylesheet" href="css/banner.css">
</head>
<body>
<div class="banner" id="banner">
<ul class="imgbox">
<li><img src="img/1.png" alt=""></li>
<li><img src="img/2.png" alt=""></li>
<li><img src="img/3.png" alt=""></li>
<li><img src="img/4.png" alt=""></li>
</ul>
<div class="pagebtn hide">
<p class="prev"><</p>
<p class="next">></p>
</div>
<div class="imgNav">
<ul class="nav"></ul>
</div>
</div>
<script src="js/jquery-1.12.3.min.js"></script>
<script src="js/banner.js"></script>
<script> $("#banner").banner({ "auto": true, //是否自动播放 "imgboxCls": "imgbox", //图片列表class "pagebtnCls": "pagebtn", //左右点击按钮wrap class "prevCls": "prev", //上一页btn class "nextCls": "next", //下一页btn class "navCls": "nav", //缩略图导航 class "actCls": "active", //当前图片状态 "hideCls": "hide", //隐藏 class "isNav": true //是否开启小图导航栏 }); </script>
</body>
</html>css代码
*{ padding: 0; margin: 0; box-sizing: border-box; }
ul,li{ list-style: none; }
.hide{ display: none; }
div.banner{ width: 800px; height: 300px; margin: 20px auto; position: relative; overflow: hidden; }
ul.imgbox{ width: auto; height: 300px; position: absolute; left: 0; top: 0; }
ul.imgbox li{ float: left; }
ul.imgbox li img{ width: 800px; height: 300px; }
div.pagebtn{ width: 100%; height: 50px; position: absolute; top: 50%; left: 0; margin-top: -25px; }
div.pagebtn p{ width: 50px; height: 50px; border-radius: 50%; background-color: rgba(255,255,255,.5); color: #fff; text-align: center; line-height: 50px; font-size: 30px; cursor: pointer; }
div.pagebtn p.prev{ float: left; }
div.pagebtn p.next{ float: right; }
div.imgNav{ position: absolute; left: 10px; bottom: 10px; width: 100%; height: 60px; }
ul.nav{ height: 80px; }
ul.nav li{ float: left; margin-right: 10px; cursor: pointer; }
ul.nav li.active{ border: 1px solid #fff; }
ul.nav li img{ width: 60px; height: 60px; display: block; }插件banner.js
;(function($,window,document,undefined){
/*****定义Banner的构造函数******/
//将变量定义到对象的属性上，函数变成对象的方法，使用时通过对象获取
var Banner = function(ele,opt){
this.$element = ele;
this.defaults = {
"auto": true, //是否自动播放
"imgboxCls": "imgbox", //图片列表class
"pagebtnCls": "pagebtn", //左右点击按钮wrap class
"prevCls": "prev", //上一页btn class
"nextCls": "next", //下一页btn class
"navCls": "nav", //缩略图导航 class
"actCls": "active", //当前图片状态
"hideCls": "hidden", //隐藏 class
"isNav": true //是否开启小图导航栏
};
this.options = $.extend({},this.defaults,opt);
/*****定义全局变量******/
var _ = this,
$imgbox = this.$element.find("."+this.options.imgboxCls), //图片列表wrap
imgLength = $imgbox.find("img").length, //图片张数
imgWidth = this.$element.width(), //图片宽度
imgBoxWidth = imgLength*imgWidth, //图片列表总长度
$navBox = this.$element.find("."+this.options.navCls), //图片导航wrap
actCls = this.options.actCls, //当前图片状态
navIndex = 0, //当前索引
slideTarget = 0, //轮播目标值
timer = null; //定时器
/***** 定义Banner私有方法******/
// 自动播放
this.auto = function(){
if(_.options.auto == "undefined" && _.options.auto == false){
return false;
}
clearInterval(timer);
timer = setInterval(function(){
_.next();
},3000);
};
// 暂停播放
this.stop = function(){
clearInterval(timer);
};
// 设置navIndex slideTarget
this.setPostion = function(index,target){
$navBox.find("li").removeClass(actCls).eq(index).addClass(actCls);
$imgbox.animate({"left": target});
};
// 下一页
this.next = function(){
navIndex++;
var isFir = $imgbox.children(":first").attr("data-clone");
if(!!isFir){
$imgbox.children(":first").remove();
}
if(navIndex == 1){
if(slideTarget < 0){
$imgbox.children(":last").remove();
$imgbox.width(imgBoxWidth);
$imgbox.css({"left": 0});
slideTarget = 0;
}
}else if(navIndex == imgLength){
navIndex = 0;
var $firstClone = $imgbox.children(":first").clone();
$firstClone.attr("data-clone","last");
$imgbox.append($firstClone);
$imgbox.width(function(){
return imgBoxWidth+imgWidth;
});
if(!!isFir){
$imgbox.css({"left": imgWidth-imgBoxWidth});
slideTarget = imgWidth-imgBoxWidth;
}
}
slideTarget -= imgWidth;
_.setPostion(navIndex,slideTarget);
};
// 上一页
this.prev = function(){
navIndex--;
var isLast = $imgbox.children(":last").attr("data-clone");
if(!!isLast){
$imgbox.children(":last").remove();
}
if(navIndex == -1){
navIndex = imgLength - 1;
var $lastClone = $imgbox.children(":last").clone();
$lastClone.attr("data-clone","first");
$imgbox.children(":first").before($lastClone);
$imgbox.width(function(){
return imgBoxWidth+imgWidth;
});
$imgbox.css({"left":-imgWidth+"px"});
slideTarget = -imgWidth;
}else if(navIndex == imgLength - 2){
if(slideTarget == 0){
$imgbox.children(":first").remove();
$imgbox.width(imgBoxWidth);
$imgbox.css({"left": (imgWidth-imgBoxWidth)+"px"});
slideTarget = imgWidth-imgBoxWidth;
}
}
slideTarget += imgWidth;
_.setPostion(navIndex,slideTarget);
};
// 定位图片 小图导航
this.position = function(index){
if(index == navIndex) return false;
if(index == 0 && navIndex == imgLength-1){
_.next();
return ;
}
if(index == imgLength-1 && navIndex == 0){
_.prev();
return ;
}
var isFir = !!$imgbox.children(":first").attr("data-clone");
var isLast = !!$imgbox.children(":last").attr("data-clone");
if(isFir){
$imgbox.width(imgBoxWidth);
$imgbox.children(":first").remove();
$imgbox.css("left",(imgWidth-imgBoxWidth)+"px");
slideTarget = imgWidth - imgBoxWidth;
}
if(isLast){
$imgbox.width(imgBoxWidth);
$imgbox.children(":last").remove();
$imgbox.css("left",0);
slideTarget = 0;
}
navIndex = index;
slideTarget = -imgWidth*index;
_.setPostion(index,slideTarget);
}
}
/*****定义Banner对象的方法******/
Banner.prototype = {
// 调用Banner私有方法 处理DOM
init: function(){
var _ = this,
$prev = _.$element.find("."+_.options.prevCls), //上一页按钮
$next = _.$element.find("."+_.options.nextCls), //下一页按钮
$nav = _.$element.find("."+_.options.navCls), //图片导航wrap
$imgbox = _.$element.find("."+_.options.imgboxCls), //imgbox wrap
$pagebtn = _.$element.find("."+_.options.pagebtnCls), //pagebtn wrap
navCls = _.options.actCls, //图片导航wrap class
imgLength = $imgbox.find("img").length; //图片张数
imgWidth = _.$element.width(), //图片宽度
$img = $imgbox.find("img"); //轮播图片集合
isNavImg = !!_.options.isNav; //是否开启小图导航
// 设置图片框width
$imgbox.width(imgLength*imgWidth);
_.auto();
// 是否开启小图导航点击
if(isNavImg){
// 填充小图导航图片
$.each($img,function(v,obj){
var _self = $(this);
var $liObj = v==0?$('<li class="'+ navCls +'"><img src="'+ _self.attr("src") +'"></li>'):$('<li><img src="'+ _self.attr("src") +'"></li>');
$nav.append($liObj);
});
}else{
$nav.addClass(_.options.hideCls);
}
// hover
_.$element.hover(function(){
$pagebtn.removeClass(_.options.hideCls);
_.stop();
},function(){
$pagebtn.addClass(_.options.hideCls);
_.auto();
});
// 上一页
$prev.click(function(){
_.prev();
});
// 下一页
$next.click(function(){
_.next();
});
// 小图导航点击
$nav.on("click","li",function(){
var _self = $(this);
_.position(_self.index());
});
}
}
/*****定义插件banner，在插件中使用Banner对象******/
$.fn.banner = function(opt){
// 创建Banner实体
var ban = new Banner(this,opt);
// 调用Banner初始化方法
return ban.init();
}
})(jQuery,window,document);