201530126012@qq.com
7 years ago
parent
947d745a24
commit
693a97758d
|
After Width: | Height: | Size: 7.1 KiB |
|
After Width: | Height: | Size: 7.5 KiB |
|
After Width: | Height: | Size: 8.6 KiB |
|
After Width: | Height: | Size: 8.4 KiB |
File diff suppressed because one or more lines are too long
@ -0,0 +1,339 @@
|
|||||||
|
!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 = '<span class="' + (_this.options.bulletClass + ' ' + _this.options.bulletActiveClass) + '"></span>';
|
||||||
|
|
||||||
|
_this.$pagination.append(initActive + new Array(_this.itemNums).join('<span class="' + _this.options.bulletClass + '"></span>'));
|
||||||
|
}
|
||||||
|
;
|
||||||
|
|
||||||
|
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);
|
||||||
Loading…
Reference in new issue