106 lines
3.1 KiB
JavaScript
106 lines
3.1 KiB
JavaScript
|
/**
|
||
|
|
* To create dots index on iSlider
|
||
|
|
*
|
||
|
|
* @file dot.js
|
||
|
|
* @author BE-FE Team
|
||
|
|
* xieyu33333 xieyu33333@gmail.com
|
||
|
|
* shinate shine.wangrs@gmail.com
|
||
|
|
* @Instructions
|
||
|
|
* activation:
|
||
|
|
* new iSlider({
|
||
|
|
* ...
|
||
|
|
* plugins: ['dot']
|
||
|
|
* ...
|
||
|
|
* });
|
||
|
|
* more options:
|
||
|
|
* new iSlider({
|
||
|
|
* ...
|
||
|
|
* plugins: [['dot', {locate:'absoulute'}]]
|
||
|
|
* ...
|
||
|
|
* });
|
||
|
|
* @options
|
||
|
|
* locate {string|HTML Element} the warpper of dots value: 'absolute', 'relative' or Specified dom, default: 'absolute'
|
||
|
|
*/
|
||
|
|
|
||
|
|
(function (global, factory) {
|
||
|
|
/* CommonJS */
|
||
|
|
if (typeof require === 'function' && typeof module === 'object' && module && typeof exports === 'object' && exports)
|
||
|
|
factory(require('./iSlider'));
|
||
|
|
/* AMD */
|
||
|
|
else if (typeof define === 'function' && define['amd'])
|
||
|
|
define(['./iSlider'], function (iSlider) {
|
||
|
|
factory(iSlider);
|
||
|
|
});
|
||
|
|
/* Global */
|
||
|
|
else
|
||
|
|
factory(global['iSlider']);
|
||
|
|
|
||
|
|
})(window ? window : this, function (iSlider) {
|
||
|
|
|
||
|
|
'use strict';
|
||
|
|
|
||
|
|
iSlider && iSlider.regPlugin('dot', function (opts) {
|
||
|
|
|
||
|
|
|
||
|
|
var HANDLE = this;
|
||
|
|
var data = HANDLE.data;
|
||
|
|
var dots = [];
|
||
|
|
var evtHandle = [];
|
||
|
|
var endEvt = HANDLE.deviceEvents.endEvt;
|
||
|
|
|
||
|
|
var dotWrap = document.createElement('ul');
|
||
|
|
dotWrap.className = 'islider-dot-wrap';
|
||
|
|
|
||
|
|
renderDots();
|
||
|
|
|
||
|
|
locate(opts && opts.locate != null ? opts.locate : false)
|
||
|
|
.appendChild(dotWrap);
|
||
|
|
|
||
|
|
HANDLE.on('slideChange', function () {
|
||
|
|
for (var i = 0; i < data.length; i++) {
|
||
|
|
dots[i].className = 'islider-dot';
|
||
|
|
if (i === this.slideIndex) {
|
||
|
|
dots[i].className += ' active';
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
HANDLE.on('loadData', function () {
|
||
|
|
data = this.data;
|
||
|
|
renderDots();
|
||
|
|
}, 1);
|
||
|
|
|
||
|
|
function renderDots() {
|
||
|
|
var fragment = document.createDocumentFragment();
|
||
|
|
dots.forEach(function (el, i) {
|
||
|
|
el.removeEventListener(endEvt, evtHandle[i], false);
|
||
|
|
});
|
||
|
|
dots = [], evtHandle = [];
|
||
|
|
dotWrap.innerHTML = '';
|
||
|
|
for (var i = 0; i < data.length; i++) {
|
||
|
|
dots[i] = document.createElement('li');
|
||
|
|
dots[i].className = 'islider-dot';
|
||
|
|
dots[i].setAttribute('index', i);
|
||
|
|
if (i === HANDLE.slideIndex) {
|
||
|
|
dots[i].className += ' active';
|
||
|
|
}
|
||
|
|
evtHandle[i] = function () {
|
||
|
|
HANDLE.slideTo(parseInt(this.getAttribute('index'), 10));
|
||
|
|
};
|
||
|
|
dots[i].addEventListener(endEvt, evtHandle[i], false);
|
||
|
|
fragment.appendChild(dots[i]);
|
||
|
|
}
|
||
|
|
dotWrap.appendChild(fragment);
|
||
|
|
}
|
||
|
|
|
||
|
|
function locate(locate) {
|
||
|
|
if (locate === 'relative') {
|
||
|
|
return HANDLE.wrap;
|
||
|
|
} else if (Boolean(locate.nodeName) && Boolean(locate.nodeType)) {
|
||
|
|
return locate;
|
||
|
|
}
|
||
|
|
return HANDLE.wrap.parentNode;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
});
|