封裝banner外掛（完整版）
左右運動版輪播圖
-
自動切換並且實現無縫斜街
-
點選焦點切換
-
點選左右切換
-
封裝輪播圖外掛
-
...
window.onload=function(){}容易被覆蓋掉的解決方案
什麼時候執行延遲載入：當頁面載入成功才執行延遲載入。
window.onload=function(){};但是window.onload在當前頁面只能執行一次，所以容易被覆蓋掉，最好不用
所以可以用window.addEventListener('load');但是不相容
所以這裡用定時器setTimeout();當整個js同步都執行完後（頁面都載入完後）才會執行這個非同步
所以很多時候都用定時器setTimeout()來代替window.onload
目錄
思路
banner.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--<link rel="stylesheet/less" href="css/banner.less">
<script src="js/less-2.5.3.min.js"></script>-->
<link rel="stylesheet" href="css/banner.min.css">
</head>
<body>
<!--BANNER-->
<div class="container" id="container">
<!--WRAPPER-->
<ul class="wrapper clearfix">
<!--<li class="slide">
<a href="#">
<img src="img/banner1.jpg" alt="">
</a>
</li>-->
</ul>
<!--FOCUS-BOX-->
<ul class="focusBox clearfix">
<!--<li class="select"></li>
<li></li>-->
</ul>
<!--ARROW-->
<a href="javascript:;" class="arrow arrowLeft"></a>
<a href="javascript:;" class="arrow arrowRight"></a>
</div>
<div class="container" id="container2">
<!--WRAPPER-->
<ul class="wrapper clearfix">
</ul>
<!--FOCUS-BOX-->
<ul class="focusBox clearfix">
<!--<li class="select"></li>
<li></li>-->
</ul>
</div>
<!--IMPORT JS-->
<script src="js/utils.min.js"></script>
<script src="js/animate.min.js"></script>
<script src="js/banner.js"></script>
</body>
</html>
複製程式碼banner.less
@import "reset";
.container {
@W: 1000px;
@H: 300px;
position: relative;
margin: 20px auto;
width: @W;
height: @H;
text-align: center;
overflow: hidden;
background: url("../img/default.gif") no-repeat center center #EEE;
.wrapper {
position: absolute;
top: 0;
left: 0;
width: unit(unit(@W,px)*10, px); //=>需要在JS中根據獲取的資料動態設定寬度
height: @H;
.slide {
float: left;
width: @W;
height: @H;
a {
display: block;
width: @W;
height: @H;
img {
display: none;
width: @W;
height: @H;
opacity: 0;
filter: alpha(opacity=0);
}
}
}
}
.focusBox {
display: inline-block;
position: relative;
top: unit(unit(@H,px)-30, px);
z-index: 999;
padding: 4px;
background: #999;
background: rgba(0, 0, 0, .5);
border-radius: 20px;
li {
float: left;
margin: 0 4px;
width: 12px;
height: 12px;
background: #FFF;
border-radius: 50%;
cursor: pointer;
&.select {
background: #E01D20;
}
}
}
.arrow {
display: none;
position: absolute;
top: 50%;
margin-top: -22.5px;
width: 28px;
height: 45px;
background: url("../img/pre.png") no-repeat;
opacity: 0.5;
filter: alpha(opacity=50);
&.arrowLeft {
left: 0;
}
&.arrowRight {
right: 0;
background-position: -50px 0;
}
&:hover {
opacity: 1;
filter: alpha(opacity=100);
}
}
}
複製程式碼reset.less
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, button, input, textarea, th, td {
margin: 0;
padding: 0
}
body {
font-size: 12px;
font-style: normal;
font-family: "\5FAE\8F6F\96C5\9ED1", Helvetica, sans-serif
}
small {
font-size: 12px
}
h1 {
font-size: 18px
}
h2 {
font-size: 16px
}
h3 {
font-size: 14px
}
h4, h5, h6 {
font-size: 100%
}
ul, ol {
list-style: none
}
a {
text-decoration: none;
background-color: transparent
}
a:hover, a:active {
outline-width: 0;
text-decoration: none
}
table {
border-collapse: collapse;
border-spacing: 0
}
hr {
border: 0;
height: 1px
}
img {
border-style: none
}
img:not([src]) {
display: none
}
svg:not(:root) {
overflow: hidden
}
html {
-webkit-touch-callout: none;
-webkit-text-size-adjust: 100%
}
input, textarea, button, a {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0)
}
article, aside, details, figcaption, figure, footer, header, main, menu, nav, section, summary {
display: block
}
audio, canvas, progress, video {
display: inline-block
}
audio:not([controls]), video:not([controls]) {
display: none;
height: 0
}
progress {
vertical-align: baseline
}
mark {
background-color: #ff0;
color: #000
}
sub, sup {
position: relative;
font-size: 75%;
line-height: 0;
vertical-align: baseline
}
sub {
bottom: -0.25em
}
sup {
top: -0.5em
}
button, input, select, textarea {
font-size: 100%;
outline: 0
}
button, input {
overflow: visible
}
button, select {
text-transform: none
}
textarea {
overflow: auto
}
button, html [type="button"], [type="reset"], [type="submit"] {
-webkit-appearance: button
}
button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner {
border-style: none;
padding: 0
}
button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring {
outline: 1px dotted ButtonText
}
[type="checkbox"], [type="radio"] {
box-sizing: border-box;
padding: 0
}
[type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button {
height: auto
}
[type="search"] {
-webkit-appearance: textfield;
outline-offset: -2px
}
[type="search"]::-webkit-search-cancel-button, [type="search"]::-webkit-search-decoration {
-webkit-appearance: none
}
::-webkit-input-placeholder {
color: inherit;
opacity: .54
}
::-webkit-file-upload-button {
-webkit-appearance: button;
font: inherit
}
.clearfix:after {
display: block;
height: 0;
content: "";
clear: both
}
複製程式碼banner.js
~function (options) {
var container = document.getElementById('container'),
containerChild = utils.children(container),
wrapper = containerChild[0],
focusBox = containerChild[1],
arrowLeft = containerChild[2],
arrowRight = containerChild[3];
var slideList = null,
imgList = null,
focusList = null,
bannerData = null,
containerWidth = container.clientWidth;
//=>INIT PARAMETERS 預設設定
var _default = {
initIndex: 0,
autoInterval: 2000
};
//遍歷options替換預設設定
for (var key in options) {
if (options.hasOwnProperty(key)) {
_default[key] = options[key];
}
}
var initIndex = _default.initIndex,
autoInterval = _default.autoInterval;
//=>GET DATA & BIND DATA
~function () {
//->AJAX GET DATA 獲取資料
var xhr = new XMLHttpRequest();
xhr.open('GET', 'json/banner.json', false);
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
bannerData = utils.toJSON(xhr.responseText);
}
};
xhr.send(null);
//->BIND DATA 繫結資料
var str = ``,
strFocus = ``;
for (var i = 0; i < bannerData.length; i++) {
var item = bannerData[i];
str += `<li class="slide">
<a href="${item.link}">
<img src="" data-img="${item.img}" alt="${item.desc}">
</a>
</li>`;
strFocus += `<li></li>`;
}
wrapper.innerHTML = str;
focusBox.innerHTML = strFocus;
//->GET ELEMENT LIST
slideList = wrapper.getElementsByTagName('li');
imgList = wrapper.getElementsByTagName('img');
focusList = focusBox.getElementsByTagName('li');
//=>CLONE 克隆第一張到末尾 cloneNode(true)深度克隆
wrapper.appendChild(slideList[0].cloneNode(true));
//->COMPUTED WRAPPER WIDTH
utils.css(wrapper, 'width', (bannerData.length + 1) * containerWidth);
}();
//=>INIT SHOW & LAZY IMG
~function () {
//->FOCUS DEFAULT SHOW
for (var i = 0; i < focusList.length; i++) {
focusList[i].className = i === initIndex ? 'select' : null;
}
//->WRAPPER DEFAULT SHOW
utils.css(wrapper, 'left', -containerWidth * initIndex);
//->LAZY IMG 懶載入
// 什麼時候執行延遲載入：當頁面載入成功才執行延遲載入
// window.onload=function(){};但是window.onload在當前頁面只能執行一次，所以容易被覆蓋掉，最好不用。
// 所以可以用window.addEventListener('load');但是不相容
// 所以這裡用定時器setTimeout();當整個js同步都執行完後（頁面都載入完後）才會執行這個非同步，所以這裡500ms可以寫成0ms也行
// 所以很多時候都用定時器setTimeout()來代替window.onload
var timer = setTimeout(function () {
for (var k = 0; k < imgList.length; k++) {
lazyImg(imgList[k]);
}
clearTimeout(timer);
}, 500);
function lazyImg(curImg) {
var tempImg = new Image;
tempImg.onload = function () {
curImg.src = this.src;
curImg.style.display = 'block';
animate({
curEle: curImg,
target: {opacity: 1},
duration: 200
});
tempImg = null;
};
tempImg.src = curImg.getAttribute('data-img');
}
}();
//=>AUTO CHANGE 自動切換 當運動到最後一張，讓wrapper瞬移到第一張，並且讓initIndex = 1，再執行動畫就從第二張開始
var autoTimer = null;
autoTimer = setInterval(autoMove, autoInterval);
function autoMove() {
initIndex++;
if (initIndex === bannerData.length + 1) {
utils.css(wrapper, 'left', 0);
initIndex = 1;
}
change();
}
//=>MOUSE EVENT
container.onmouseenter = function () {
clearInterval(autoTimer);
arrowLeft.style.display = arrowRight.style.display = 'block';
};
container.onmouseleave = function () {
autoTimer = setInterval(autoMove, autoInterval);
arrowLeft.style.display = arrowRight.style.display = 'none';
};
//=>BIND FOCUS EVENT
~function () {
for (var i = 0; i < focusList.length; i++) {
focusList[i].myIndex = i;
focusList[i].onclick = function () {
initIndex = this.myIndex;
change();
}
}
}();
//=>BIND ARROW EVENT
~function () {
arrowRight.onclick = autoMove;
arrowLeft.onclick = function () {
initIndex--;
if (initIndex === -1) {
//->RUN TO CLONE ELEMENT
utils.css(wrapper, 'left', -bannerData.length * containerWidth);
initIndex = bannerData.length - 1;
}
change();
}
}();
//=>CHANGE
function change() {
animate({
curEle: wrapper,
target: {left: -initIndex * containerWidth},
duration: 300
});
//->CHANGE FOCUS
var tempIndex = initIndex;
tempIndex === bannerData.length ? tempIndex = 0 : null;
for (var i = 0; i < focusList.length; i++) {
focusList[i].className = i === tempIndex ? 'select' : null;
}
}
}();
複製程式碼banner.json
複製程式碼[
{
"id": 1,
"img": "img/banner1.jpg",
"desc": "推薦機會",
"link": "http://www.baidu.com/"
},
{
"id": 2,
"img": "img/banner2.jpg",
"desc": "夢想起飛",
"link": "http://www.baidu.com/"
},
{
"id": 3,
"img": "img/banner3.jpg",
"desc": "把握未來",
"link": "http://www.baidu.com/"
},
{
"id": 4,
"img": "img/banner4.jpg",
"desc": "先學習",
"link": "http://www.baidu.com/"
}
]
複製程式碼封裝banner外掛（封裝外掛的基本思路）
外掛思想：功能越強大越好
首先理解jq中最難理解的部分：
如何讓一個函式執行，建立一個屬於自己函式和這個類的例項
~function () {
function BannerPlugin(options) {//建構函式建立一個類 options配置引數
return new BannerPlugin.fn.init(options);
}
BannerPlugin.fn = BannerPlugin.prototype = {};
var init = BannerPlugin.fn.init = function (options) {
};
init.prototype = BannerPlugin.prototype;
}();
//--------------------------以上可以簡寫成以下-----------------------------------------
// 封裝外掛直接用建構函式模式 先寫一個自執行函式~function (){}，
// 在裡面建立一個類BannerPlugin(),
// 執行BannerPlugin()會配置很多引數，很多引數用options來配置
~function () {
function BannerPlugin(options) {
// 執行BannerPlugin這個方法建立的是init對應函式的例項，
// 但是會用到BannerPlugin.prototype原型上的方法，所以
// BannerPlugin.prototype.init.prototype = BannerPlugin.prototype;
return new BannerPlugin.prototype.init(options);
}
BannerPlugin.prototype = {
//為了保證完建構函式完整性，constructor:BannerPlugin
//見JS中的閉包及物件導向程式設計 — 2、物件導向程式設計詳解 19-2重新構造原型（最常用））
constructor:BannerPlugin,
init:function (options) { // 建立的是init時有個形參options，這裡需要通過options接收
// 這裡的this也可以呼叫BannerPlugin原型上的方法 看到20:20
}
};
// 讓INIT的原型指向BANNER-PLUGIN的原型,目的:當執行BANNER-PLUGIN方法的時候建立出來的依然是BANNER-PLUGIN類的例項
BannerPlugin.prototype.init.prototype = BannerPlugin.prototype;
console.dir(BannerPlugin({}));//直接執行BannerPlugin()先建立init例項，由init例項再變成BannerPlugin例項，不用再通過newBannerPlugin()去建立BannerPlugin例項
window.$banner = window.BannerPlugin = BannerPlugin;//暴露BannerPlugin
}();
BannerPlugin({});
$banner({});
複製程式碼圖解：
首先一個類BannerPlugin()，有屬性prototype；
BannerPlugin.prototype開闢一個新堆記憶體；（自己開闢的新堆記憶體沒有constructor， 為了保證完建構函式完整性，constructor:BannerPlugin 見JS中的閉包及物件導向程式設計 — 2、物件導向程式設計詳解 19-2重新構造原型（最常用））；
原型prototype的_proto_都指向Object的原型
BannerPlugin.prototype裡面有個init方法，方法又是一個堆記憶體BannerPlugin.prototype.init （BannerPlugin.prototype.init又是一個函式資料型別，有屬性prototype）
BannerPlugin.prototype.init.prototype = BannerPlugin.prototype：讓init的原型指向BannerPlugin的原型, 目的:當執行BannerPlugin方法的時候會通過return new BannerPlugin.prototype.init(options)建立init這個方法 的例項（init的例項），init的例項有_proto_指向所屬類的原型,最終還是指向了BannerPlugin的原型，所以創 建的init依然是BannerPlugin類的例項
為什麼要這麼做呢，為什麼不直接建立BannerPlugin這個類的例項呢？
這麼做有個好處=>直接執行BannerPlugin({})返回的例項就是BannerPlugin()這個類的例項，不再需要通過new BannerPlugin()去建立這個類的例項， 而是通過先建立init例項，由init例項再變成BannerPlugin例項（通過console.dir(BannerPlugin({}))列印出來看是個死迴圈巢狀， 在原型裡面是沒有這個概念的，因為constructor建構函式雖然指向BannerPlugin，但是和普通類還是有所區別，並不會形成死迴圈）如圖：
這個怎麼去找上級？
init例項裡面沒有通過_proto_找到BannerPlugin.prototype，BannerPlugin.prototype沒有再通過BannerPlugin.prototype.proto 找到Object.prototype。（這裡上級查詢不會去找BannerPlugin.prototype裡的constructor，這個不會形成死迴圈）
封裝外掛
看懂了jq最難理解的部分，接下來一步步寫外掛
plugin-banner.js參照banner.js封裝成外掛的，對應banner.js看（方法裡面的程式碼都是複製貼上，改變引數，涉及utils的用原生，this...），注意this，並且把很多屬性方法寫在私有屬性上就可以了。
plugin-banner.js
/*
* 分析我們需要支援的部分：
* [基礎]
* 資料動態繫結的地址是不同的 (url)
* 切換速度 (speed:300)
* 預設展示第幾張 (initIndex:0)
* 延遲多久進行圖片懶載入 (lazyImgTime:500)
*
* [自動切換]
* 是否支援自動切換 (needAutoChange:true)
* 自動切換的間隔時間 (autoInterval:2000)
*
* [焦點]
* 是否顯示焦點 (isFocusShow:true)
* 是否需要通過焦點切換 (needFocusChange:true)
* 什麼樣的事件控制焦點切換 (focusEvent:click)
*
* [左右切換]
* 是否支援左右切換 (isArrowShow:true)
*/
~function () {
function BannerPlugin(options) {
return new BannerPlugin.prototype.init(options);
}
BannerPlugin.prototype = {
constructor: BannerPlugin,
//=>1、宣告可擴充引數的預設值,並且讓傳遞引數的值OPTIONS替換原有的預設值(把需要用的引數擴充套件到例項的私有屬性上)
initDefault: function (options) {
var _default = {
container: null,
url: null,
initIndex: 0,
speed: 300,
lazyImgTime: 500,
needAutoChange: true,
autoInterval: 2000,
isFocusShow: true,
needFocusChange: true,
focusEvent: 'click',
isArrowShow: true
};
//=>迴圈options替換預設值
for (var key in options) {
if (options.hasOwnProperty(key)) {
_default[key] = options[key];
}
}
//=>把_DEFAULT中的每一項遍歷到THIS例項上（寫到私有屬性上）後銷燬_default
for (key in _default) {
if (_default.hasOwnProperty(key)) {
this[key] = _default[key];
}
}
_default = null;
},
//=>3、AJAX資料繫結（複製banner.js中的程式碼邏輯，修改url，把bannerData擴充到例項上，獲取元素和克隆）
// 這裡ajax用的同步程式設計，專案中用非同步（需要用到promise），（所以這個封裝是個入門的外掛，不建議專案中使用，同步會有問題）
queryData: function () {
var xhr = new XMLHttpRequest(),
bannerData = null;
xhr.open('GET', this.url, false);
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
bannerData = JSON.parse(xhr.responseText);
}
};
xhr.send(null);
//=>擴充到例項上,方便以後再其它方法中使用
this.bannerData = bannerData;
},
bindData: function () {
var str = ``,
strFocus = ``;
for (var i = 0; i < this.bannerData.length; i++) {
var item = this.bannerData[i];
str += `<li class="slide">
<a href="${item.link}">
<img src="" data-img="${item.img}" alt="${item.desc}">
</a>
</li>`;
strFocus += `<li data-index="${i}"></li>`;
}
this.wrapper.innerHTML = str;
this.isFocusShow ? this.focusBox.innerHTML = strFocus : null;
//=>其它事情
this.slideList = this.wrapper.getElementsByTagName('li');
this.imgList = this.wrapper.getElementsByTagName('img');
this.isFocusShow ? this.focusList = this.focusBox.getElementsByTagName('li') : null;
//=>克隆第一張到末尾
this.wrapper.appendChild(this.slideList[0].cloneNode(true));
this.wrapper.style.width = (this.bannerData.length + 1) * this.containerWidth;
},
//=>6、圖片延遲載入
lazyImg: function () {
var _this = this;
var timer = setTimeout(function () {//setTimeout中的this是window
[].forEach.call(_this.imgList, function (curImg) {
var tempImg = new Image;
tempImg.onload = function () {
curImg.src = this.src;
curImg.style.display = 'block';
animate({
curEle: curImg,
target: {opacity: 1},
duration: 200
});
tempImg = null;
};
tempImg.src = curImg.getAttribute('data-img');
});
clearTimeout(timer);
}, this.lazyImgTime);
},
//=>8、預設展示
showInit: function () {
var _this = this;
if (_this.isFocusShow) {
[].forEach.call(_this.focusList, function (item, index) {
item.className = index === _this.initIndex ? 'select' : null;
});
}
_this.wrapper.style.left = -_this.containerWidth * _this.initIndex + 'px';
},
//=>10、自動切換
change: function () {
animate({
curEle: this.wrapper,
target: {left: -this.initIndex * this.containerWidth},
duration: this.speed
});
//->CHANGE FOCUS
if (this.isFocusShow) {
var tempIndex = this.initIndex;
tempIndex === this.bannerData.length ? tempIndex = 0 : null;
[].forEach.call(this.focusList, function (item, index) {
item.className = index === tempIndex ? 'select' : null;
});
}
},
autoMove: function () {
this.initIndex++;
if (this.initIndex === this.bannerData.length + 1) {
this.wrapper.style.left = 0;
this.initIndex = 1;
}
this.change();
},
//=>12、其它切換方式
mouseEvent: function () {
var _this = this;
_this.container.onmouseenter = function () {
_this.needAutoChange ? clearInterval(_this.autoTimer) : null;
_this.isArrowShow ? _this.arrowLeft.style.display = _this.arrowRight.style.display = 'block' : null;
};
_this.container.onmouseleave = function () {
_this.needAutoChange ? _this.autoTimer = setInterval(_this.autoMove.bind(_this), _this.autoInterval) : null;
_this.isArrowShow ? _this.arrowLeft.style.display = _this.arrowRight.style.display = 'none' : null;
};
},
arrowEvent: function () {
var _this = this;
if (!_this.isArrowShow) return;
_this.arrowRight.onclick = _this.autoMove.bind(_this);//保證_this.autoMove方法中的this是例項
_this.arrowLeft.onclick = function () {
_this.initIndex--;
if (_this.initIndex === -1) {
_this.wrapper.style.left = -_this.bannerData.length * _this.containerWidth + 'px';
_this.initIndex = _this.bannerData.length - 1;
}
_this.change();
}
},
eventFocus: function () {
var _this = this;
if (!_this.isFocusShow) return;
if (!_this.needFocusChange) return;
[].forEach.call(_this.focusList, function (item, index) {
item['on' + _this.focusEvent] = function () {
_this.initIndex = index;
_this.change();
}
});
},
delegateEvent: function () {
var _this = this;
_this.container.onclick = function (e) {
e = e || window.event;
var target = e.target || e.srcElement,
targetParent = target.parentNode;
//=>焦點事件源
if (/(^| +)focusBox( +|$)/i.test(targetParent.className)) {
_this.initIndex = parseFloat(target.getAttribute('data-index'));
_this.change();
return;
}
//=>左右切換事件源
if (/(^| +)arrow( +|$)/i.test(target.className)) {
if (target.className.indexOf('arrowRight') > -1) {
_this.autoMove();
return;
}
_this.initIndex--;
if (_this.initIndex === -1) {
_this.wrapper.style.left = -_this.bannerData.length * _this.containerWidth + 'px';
_this.initIndex = _this.bannerData.length - 1;
}
_this.change();
}
};
},
init: function (options) {
//=>2、引數初始化
this.initDefault(options);
//=>4、獲取需要使用的到的元素
// var container = document.getElementById('container'),
// containerChild = utils.children(container),
// wrapper = containerChild[0],
// focusBox = containerChild[1],
// arrowLeft = containerChild[2],
// arrowRight = containerChild[3];
// var slideList = null,
// imgList = null,
// focusList = null,
// bannerData = null,
// containerWidth = container.clientWidth;
// 以上可以寫成
// this.wrapper = this.container.querySelector('.wrapper');
// this.focusBox = this.container.querySelector('.focusBox');
// this.arrowLeft = this.container.querySelector('.arrowLeft');
// this.arrowRight = this.container.querySelector('.arrowRight');
// this.containerWidth = this.container.clientWidth;
// var slideList = null,
// imgList = null,
// focusList = null;
// 以上可以寫成
var _this = this;
['wrapper', 'focusBox', 'arrowLeft', 'arrowRight'].forEach(function (item, index) {
_this[item] = _this.container.querySelector('.' + item);
});
this.containerWidth = this.container.clientWidth;
//=>5、資料繫結
this.queryData();
this.bindData();
//=>7、圖片延遲載入
this.lazyImg();
//=>9、預設展示
this.showInit();
//=>11、自動切換
// this.autoTimer = setInterval(function(){
// _this.autoMove();
// },this.autoInterval);
// 或者這樣寫
// this.autoTimer = setInterval(this.autoMove.bind(this),this.autoInterval);
if (this.needAutoChange) {
this.autoTimer = setInterval(this.autoMove.bind(this), this.autoInterval);
}
//=>13、其它方式切換
this.mouseEvent();
// this.arrowEvent();
// this.eventFocus();
this.delegateEvent();
}
};
// 14、深度擴充套件（類似jq一樣，支援extend自己擴充套件方法，別人可以自己擴充套件方法，）
BannerPlugin.extend = function (obj, deep) {
typeof deep === 'undefined' ? deep = false : null;
for (var key in obj) {
//迴圈obj，替換外掛原有方法，如果傳遞的obj中的方法在原外掛中有，就continue不執行BannerPlugin.prototype[key] = obj[key];
// 如果傳遞的obj中的方法在原外掛中有，並且deep是true的時候，替換到原型上方法執行BannerPlugin.prototype[key] = obj[key];
if (obj.hasOwnProperty(key)) {
if (BannerPlugin.prototype.hasOwnProperty(key)) {
if (deep) {
BannerPlugin.prototype[key] = obj[key];
}
continue;
}
BannerPlugin.prototype[key] = obj[key];
}
}
};
//=>讓INIT的原型指向BANNER-PLUGIN的原型,目的:當執行BANNER-PLUGIN方法的時候建立出來的依然是BANNER-PLUGIN類的例項
BannerPlugin.prototype.init.prototype = BannerPlugin.prototype;
window.$banner = window.BannerPlugin = BannerPlugin;
}();
$banner({
container: document.getElementById('container'),
url: 'json/banner.json',
autoInterval: 3000,
initIndex: 2
});
var bannerExample = $banner({
container: document.getElementById('container2'),
url: 'json/banner2.json',
needFocusChange: false,
isArrowShow: false,
speed: 100,
lazyImgTime: 2000
});
// true深度擴充套件，把外掛原有方法替換掉
// $banner.extend({
// aa: function () {
// }
// }, true);
// bannerExample.aa();//別人可以通過自己擴充套件aa()這個方法做一些其他的功能
//替換原型上的change方法
$banner.extend({
change: function () {
animate({
curEle: this.wrapper,
target: {left: -this.initIndex * this.containerWidth},
duration: this.speed,
effect: animateEffect.Bounce.easeOut
});
//->CHANGE FOCUS
if (this.isFocusShow) {
var tempIndex = this.initIndex;
tempIndex === this.bannerData.length ? tempIndex = 0 : null;
[].forEach.call(this.focusList, function (item, index) {
item.className = index === tempIndex ? 'select' : null;
});
}
}
}, true);
bannerExample.speed = 500;
複製程式碼<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--<link rel="stylesheet/less" href="css/banner.less">
<script src="js/less-2.5.3.min.js"></script>-->
<link rel="stylesheet" href="css/banner.min.css">
</head>
<body>
<!--BANNER-->
<div class="container" id="container">
<!--WRAPPER-->
<ul class="wrapper clearfix">
<!--<li class="slide">
<a href="#">
<img src="img/banner1.jpg" alt="">
</a>
</li>-->
</ul>
<!--FOCUS-BOX-->
<ul class="focusBox clearfix">
<!--<li class="select"></li>
<li></li>-->
</ul>
<!--ARROW-->
<a href="javascript:;" class="arrow arrowLeft"></a>
<a href="javascript:;" class="arrow arrowRight"></a>
</div>
<div class="container" id="container2">
<!--WRAPPER-->
<ul class="wrapper clearfix">
</ul>
<!--FOCUS-BOX-->
<ul class="focusBox clearfix">
<!--<li class="select"></li>
<li></li>-->
</ul>
</div>
<!--IMPORT JS-->
<script src="js/utils.min.js"></script>
<script src="js/animate.min.js"></script>
<script src="js/plugin-banner.js"></script>
</body>
</html>
複製程式碼banner2.json
[
{
"id": 1,
"img": "img/banner1.jpg",
"desc": "推薦機會",
"link": "http://www.baidu.com/"
},
{
"id": 2,
"img": "img/banner2.jpg",
"desc": "夢想起飛",
"link": "http://www.baidu.com/"
},
{
"id": 3,
"img": "img/banner3.jpg",
"desc": "把握未來",
"link": "http://www.baidu.com/"
}
]
複製程式碼