!function(window) {
"use strict";
var doc = window.document
, ydui = {};
var util = ydui.util = {
parseOptions: function(string) {},
sessionStorage: function() {}(),
serialize: function(value) {},
deserialize: function(value) {}
};
function storage(ls) {}
$.fn.emulateTransitionEnd = function(duration) {}
;
if (typeof define === 'function') {
define(ydui);
} else {
window.YDUI = ydui;
}
;function Slider(element, options) {
this.$element = $(element);
this.options = $.extend({}, Slider.DEFAULTS, options || {});
this.init();
}
Slider.DEFAULTS = {
speed: 300,
autoplay: 5000,
lazyLoad: false,
pagination: '.slider-pagination',
wrapperClass: 'slider-wrapper',
slideClass: 'slider-item',
bulletClass: 'slider-pagination-item',
bulletActiveClass: 'slider-pagination-item-active'
};
function Slider(element, options) {
this.$element = $(element);
this.options = $.extend({}, Slider.DEFAULTS, options || {});
this.init();
}
Slider.DEFAULTS = {
speed: 300,
autoplay: 3000,
lazyLoad: false,
pagination: '.slider-pagination',
wrapperClass: 'slider-wrapper',
slideClass: 'slider-item',
bulletClass: 'slider-pagination-item',
bulletActiveClass: 'slider-pagination-item-active'
};
Slider.prototype.init = function() {
var _this = this
, options = _this.options
, $element = _this.$element;
_this.index = 1;
_this.autoPlayTimer = null;
_this.$pagination = $element.find(options.pagination);
_this.$wrapper = $element.find('.' + options.wrapperClass);
_this.itemNums = _this.$wrapper.find('.' + options.slideClass).length;
options.lazyLoad && _this.loadImage(0);
_this.createBullet();
_this.cloneItem().bindEvent();
}
;
Slider.prototype.bindEvent = function() {
var _this = this
, touchEvents = _this.touchEvents();
_this.$wrapper.find('.' + _this.options.slideClass).on(touchEvents.start, function(e) {
_this.onTouchStart(e);
}).on(touchEvents.move, function(e) {
_this.onTouchMove(e);
}).on(touchEvents.end, function(e) {
_this.onTouchEnd(e);
});
$(window).on('resize.ydui.slider', function() {
_this.setSlidesSize();
});
~~_this.options.autoplay > 0 && _this.autoPlay();
_this.$wrapper.on('click.ydui.slider', function(e) {
if (!_this.touches.allowClick) {
e.preventDefault();
}
});
}
;
Slider.prototype.cloneItem = function() {
var _this = this
, $wrapper = _this.$wrapper
, $sliderItem = _this.$wrapper.find('.' + _this.options.slideClass)
, $firstChild = $sliderItem.filter(':first-child').clone()
, $lastChild = $sliderItem.filter(':last-child').clone();
$wrapper.prepend($lastChild);
$wrapper.append($firstChild);
_this.setSlidesSize();
return _this;
}
;
Slider.prototype.createBullet = function() {
var _this = this;
if (!_this.$pagination[0])
return;
var initActive = '';
_this.$pagination.append(initActive + new Array(_this.itemNums).join(''));
}
;
Slider.prototype.activeBullet = function() {
var _this = this;
if (!_this.$pagination[0])
return;
var itemNums = _this.itemNums
, index = _this.index % itemNums >= itemNums ? 0 : _this.index % itemNums - 1
, bulletActiveClass = _this.options.bulletActiveClass;
!!_this.$pagination[0] && _this.$pagination.find('.' + _this.options.bulletClass).removeClass(bulletActiveClass).eq(index).addClass(bulletActiveClass);
}
;
Slider.prototype.setSlidesSize = function() {
var _this = this
, _width = _this.$wrapper.width();
_this.$wrapper.css('transform', 'translate3d(-' + _width + 'px,0,0)');
_this.$wrapper.find('.' + _this.options.slideClass).css({
width: _width
});
}
;
Slider.prototype.autoPlay = function() {
var _this = this;
_this.autoPlayTimer = setInterval(function() {
if (_this.index > _this.itemNums) {
_this.index = 1;
_this.setTranslate(0, -_this.$wrapper.width());
}
_this.setTranslate(_this.options.speed, -(++_this.index * _this.$wrapper.width()));
}, _this.options.autoplay);
}
;
Slider.prototype.stopAutoplay = function() {
var _this = this;
clearInterval(_this.autoPlayTimer);
return _this;
}
;
Slider.prototype.setTranslate = function(speed, x) {
var _this = this;
_this.options.lazyLoad && _this.loadImage(_this.index);
_this.activeBullet();
_this.$wrapper.css({
'transitionDuration': speed + 'ms',
'transform': 'translate3d(' + x + 'px,0,0)'
});
}
;
Slider.prototype.touches = {
moveTag: 0,
startClientX: 0,
moveOffset: 0,
touchStartTime: 0,
isTouchEvent: false,
allowClick: false// 鐢ㄤ簬鍒ゆ柇浜嬩欢涓虹偣鍑昏繕鏄嫋鍔
};
Slider.prototype.onTouchStart = function(event) {
if (event.originalEvent.touches)
event = event.originalEvent.touches[0];
var _this = this
, touches = _this.touches;
touches.allowClick = true;
touches.isTouchEvent = event.type === 'touchstart';
if (!touches.isTouchEvent && 'which'in event && event.which === 3)
return;
if (touches.moveTag == 0) {
touches.moveTag = 1;
touches.startClientX = event.clientX;
touches.touchStartTime = Date.now();
var itemNums = _this.itemNums;
if (_this.index == 0) {
_this.index = itemNums;
_this.setTranslate(0, -itemNums * _this.$wrapper.width());
return;
}
if (_this.index > itemNums) {
_this.index = 1;
_this.setTranslate(0, -_this.$wrapper.width());
}
}
}
;
Slider.prototype.onTouchMove = function(event) {
event.preventDefault();
if (event.originalEvent.touches)
event = event.originalEvent.touches[0];
var _this = this
, touches = _this.touches;
touches.allowClick = false;
if (touches.isTouchEvent && event.type === 'mousemove')
return;
var deltaSlide = touches.moveOffset = event.clientX - touches.startClientX;
if (deltaSlide != 0 && touches.moveTag != 0) {
if (touches.moveTag == 1) {
_this.stopAutoplay();
touches.moveTag = 2;
}
if (touches.moveTag == 2) {
_this.setTranslate(0, -_this.index * _this.$wrapper.width() + deltaSlide);
}
}
}
;
Slider.prototype.onTouchEnd = function() {
var _this = this
, speed = _this.options.speed
, _width = _this.$wrapper.width()
, touches = _this.touches
, moveOffset = touches.moveOffset;
setTimeout(function() {
touches.allowClick = true;
}, 0);
if (touches.moveTag == 1) {
touches.moveTag = 0;
}
if (touches.moveTag == 2) {
touches.moveTag = 0;
var timeDiff = Date.now() - touches.touchStartTime;
if (timeDiff > 300 && Math.abs(moveOffset) <= _this.$wrapper.width() * .5) {
_this.setTranslate(speed, -_this.index * _this.$wrapper.width());
} else {
_this.setTranslate(speed, -((moveOffset > 0 ? --_this.index : ++_this.index) * _width));
}
_this.autoPlay();
}
}
;
Slider.prototype.touchEvents = function() {
var supportTouch = (window.Modernizr && !!window.Modernizr.touch) || (function() {
return !!(('ontouchstart'in window) || window.DocumentTouch && document instanceof DocumentTouch);
}
)();
return {
start: supportTouch ? 'touchstart.ydui.slider' : 'mousedown.ydui.slider',
move: supportTouch ? 'touchmove.ydui.slider' : 'mousemove.ydui.slider',
end: supportTouch ? 'touchend.ydui.slider' : 'mouseup.ydui.slider'
};
}
;
function Plugin(option) {
return this.each(function() {
var $this = $(this)
, slider = $this.data('ydui.slider');
if (!slider) {
$this.data('ydui.slider', new Slider(this,option));
}
});
}
$(window).on('load.ydui.slider', function() {
$('[data-ydui-slider]').each(function() {
var $this = $(this);
$this.slider(window.YDUI.util.parseOptions($this.data('ydui-slider')));
});
});
$.fn.slider = Plugin;
}(window);