Коллеги доброго времени суток, есть скрипт:
var PLUGIN= (function() {
"use strict";
function _CROSS_EVENTS(element, type, func) {
this.add = function(element, type, func) {
if(typeof addEventListener !== 'undefined') {
element.addEventListener(type, func, false);
} else if(typeof attachEvent !== 'undefined') {
element.attachEvent('on' + type, func);
} else {
element['on' + type] = func;
}
},
this.default = function(e) {
if(typeof e.preventDefault !== 'undefined') {
e.preventDefault();
} else {
e.returnValue = false;
}
},
this.remove = function(element, tp, func) {
if(typeof removeEventListener !== 'undefined') {
element.removeEventListener(tp, func, false);
} else if(typeof detachEvent !== 'undefined') {
element.detachEvent('on' + tp, func);
} else {
element['on' + tp] = null;
}
}
};
var _crossy = new _CROSS_EVENTS();
var _EVENTS_TYPE = {
start: '',
move: '',
end: '',
resize: 'resize',
transitionend: 'transitionend'
};
function _SLIDER() {
this.bullets = false,
this.arrows = false,
this.dragDrop = false,
this.autoSwitch = false,
this.deadZone = false,
this.standartDuration = 100
}
_SLIDER.INIT = function(element, params) {
_sliderSize(element);
var slider = new _SLIDER();
slider.element = element.querySelector('.slider_list');
_setOptions(slider, params);
_getEvenetsType(element);
function _sliderStart(e) {
e = e || window.e;
if (slider.action && !slider.element) return;
if (!slider.dragDrop) return;
slider.action = true;
var coords = _getOffset(slider.element),
downX = e.clientX;
slider.shiftX = downX - coords.left;
slider.element.classList.add('move');
}
function _sliderGo(e) {
e = e || window.e;
if (!slider.action) return;
slider.distanceX = e.clientX - slider.shiftX;
_sliderMove(slider.element, slider.distanceX);
_crossy.default(e);
}
function _sliderStop(e) {
e = e || window.e;
if (slider.action) {
_getTransition(slider.element, slider.standartDuration);
_sliderMove(slider.element, 0);
}
}
function _transitionStop() {
if (slider.action) {
_getTransition(slider.element, 0);
slider.element.classList.remove('move');
slider.action = false;
}
}
function _sizeCrew(e) {
e = e || window.e;
_sliderSize(element);
}
_crossy.add(slider.element, 'mousedown', _sliderStart);
_crossy.add(document, 'mousemove', _sliderGo);
_crossy.add(document, 'mouseup', _sliderStop);
_crossy.add(slider.element, 'transitionend', _transitionStop);
_crossy.add(window, _EVENTS_TYPE.resize, _sizeCrew);
};
function _getTransition(element, duration) {
element.style.webkitTransition = '-webkit-transform ' + duration + 'ms linear';
element.style.mozTransition = '-moz-transform ' + duration + 'ms linear';
element.style.msTransition = '-ms-transform ' + duration + 'ms linear';
element.style.oTransition = '-o-transform ' + duration + 'ms linear';
element.style.transition = 'transform ' + duration + 'ms linear';
}
function _sliderMove(element, distance) {
element.style.webkitTransform = "-webkit-translate(" + distance + "px, 0)";
element.style.mozTransform = "-moz-translate(" + distance + "px, 0)";
element.style.msTransform = "-ms-translate(" + distance + "px, 0)";
element.style.oTransform = "-o-translate(" + distance + "px, 0)";
element.style.transform = "translate(" + distance + "px, 0)";
}
function _sliderSize(element) {
var screenWidth = _getScreenSize(),
list = element.querySelector('.slider_list'),
items = list.children;
for (var i = 0;i < items.length;i++) {
items[i].style.width = screenWidth + 'px';
}
list.style.width = (screenWidth * items.length) + 'px'
}
function _getScreenSize() { // выяснить разрешение экрана пользователя
return document.documentElement.clientWidth;
}
function _setOptions(object, params) {
if (params && _isObject(params)) {
for (var key in params) {
object[key] = params[key];
}
}
};
function _isObject(object) {
if (object.toString == Object.prototype.toString) {
return true;
} else return false;
};
function _getOffset(element) {
var box = element.getBoundingClientRect();
return {
top: box.top + pageYOffset,
left: box.left + pageXOffset
};
}
return {
sliderINIT: _SLIDER.INIT,
crossEvent: _crossy,
}
}());
PLUGIN.crossEvent.add(document,'DOMContentLoaded', function() {
var main = document,
slider_one = main.querySelector('.slider_block.one'),
slider_two = main.querySelector('.slider_block.two');
_RMS.sliderINIT(slider_one, {
dragDrop:true
});
_RMS.sliderINIT(slider_two);
});
Собственно по коду наверное ясно, что это слайдер. Суть вопроса в том, что по событию transitionend должно все "обнуляться", а оно не "обнуляется". Помогите разобраться. Заранее благодарю
