(function(ROOT, struct, undefined) {
"use strict";
var lastTime = 0,
nextFrame =
ROOT.requestAnimationFrame ||
ROOT.webkitRequestAnimationFrame ||
ROOT.mozRequestAnimationFrame ||
ROOT.msRequestAnimationFrame ||
function(callback) {
var currTime = +new Date(),
delay = Math.max(
1000 / 60,
1000 / 60 - (currTime - lastTime)
);
lastTime = currTime + delay;
return setTimeout(callback, delay);
},
cancelFrame =
ROOT.cancelAnimationFrame ||
ROOT.webkitCancelAnimationFrame ||
ROOT.webkitCancelRequestAnimationFrame ||
ROOT.mozCancelRequestAnimationFrame ||
ROOT.msCancelRequestAnimationFrame ||
clearTimeout,
DOC = ROOT.document,
divstyle = DOC.createElement("div").style,
cssVendor = (function() {
var tests = "-webkit- -moz- -o- -ms-".split(" "),
prop;
while ((prop = tests.shift())) {
if (camelCase(prop + "transform") in divstyle) {
return prop;
}
}
return "";
})(),
transition = cssTest("transition"),
toString = Object.prototype.toString,
slice = [].slice,
class2type = {},
event2type = {},
event2code = {
click: 4,
dommousescroll: 5,
keydown: 6,
resize: 7
},
POINTERTYPES = {
2: "touch",
3: "pen",
4: "mouse",
pen: "pen"
},
STARTEVENT = [],
MOVEEVENT = [],
EVENT = (function() {
var ret = {},
states = {
start: 1,
down: 1,
move: 2,
end: 3,
up: 3,
cancel: 3
};
each("mouse touch pointer MSPointer-".split(" "), function(prefix) {
var _prefix = /pointer/i.test(prefix) ? "pointer" : prefix;
ret[_prefix] = ret[_prefix] || {};
POINTERTYPES[_prefix] = _prefix;
each(states, function(endfix, code) {
var ev = camelCase(prefix + endfix);
ret[_prefix][ev] = code;
event2type[ev.toLowerCase()] = _prefix;
event2code[ev.toLowerCase()] = code;
if (code == 1) {
STARTEVENT.push(ev);
} else {
MOVEEVENT.push(ev);
}
});
});
each(
"otransitionend oTransitionEnd webkitTransitionEnd mozTransitionEnd MSTransitionEnd transitionend".split(
" "
),
function(ev) {
STARTEVENT.push(ev);
event2code[ev.toLowerCase()] = 8;
}
);
return ret;
})(),
POINTERS = {
touch: {},
pointer: {},
mouse: {}
};
each(
"Boolean Number String Function Array Date RegExp Object Error".split(
" "
),
function(name) {
class2type["[object " + name + "]"] = name.toLowerCase();
}
);
function type(obj) {
if (obj == null) {
return obj + "";
}
return typeof obj == "object" || typeof obj == "function"
? class2type[toString.call(obj)] || "object"
: typeof obj;
}
function isArrayLike(elem) {
var tp = type(elem);
return (
!!elem &&
tp != "function" &&
tp != "string" &&
(elem.length === 0 ||
(elem.length &&
(elem.nodeType == 1 || elem.length - 1 in elem)))
);
}
function camelCase(str) {
return (str + "")
.replace(/^-ms-/, "ms-")
.replace(/-([a-z]|[0-9])/gi, function(all, letter) {
return (letter + "").toUpperCase();
});
}
function cssTest(name) {
var prop = camelCase(name),
_prop = camelCase(cssVendor + prop);
return (prop in divstyle && prop) || (_prop in divstyle && _prop) || "";
}
function isFunction(func) {
return type(func) == "function";
}
function pointerLength(obj) {
var len = 0,
key;
if (type(obj.length) == "number") {
len = obj.length;
} else if ("keys" in Object) {
len = Object.keys(obj).length;
} else {
for (key in obj) {
if (obj.hasOwnProperty(key)) {
len++;
}
}
}
return len;
}
function pointerItem(obj, n) {
return "item" in obj
? obj.item(n)
: function() {
var i = 0,
key;
for (key in this) {
if (i++ == n) {
return this[key];
}
}
}.call(obj, n);
}
function each(arr, iterate) {
if (isArrayLike(arr)) {
if (type(arr.forEach) == "function") {
return arr.forEach(iterate);
}
var i = 0,
len = arr.length,
item;
for (; i < len; i++) {
item = arr[i];
if (type(item) != "undefined") {
iterate(item, i, arr);
}
}
} else {
var key;
for (key in arr) {
iterate(key, arr[key], arr);
}
}
}
function children(elem) {
var ret = [];
each(elem.children || elem.childNodes, function(elem) {
if (elem.nodeType == 1) {
ret.push(elem);
}
});
return ret;
}
function getStyle(elem, prop) {
var style =
(ROOT.getComputedStyle && ROOT.getComputedStyle(elem, null)) ||
elem.currentStyle ||
elem.style;
return style[prop];
}
function setStyle(elem, props) {
each(props, function(name, value) {
var prop;
switch (name) {
case "float":
prop = cssTest("cssFloat") ? "cssFloat" : "styleFloat";
break;
default:
prop = camelCase(name);
}
try {
elem.style[prop] = value;
} catch (e) {}
});
}
function addListener(elem, evstr, handler) {
if (type(evstr) == "object") {
return each(evstr, function(evstr, handler) {
addListener(elem, evstr, handler);
});
}
each(evstr.split(" "), function(ev) {
if (elem.addEventListener) {
elem.addEventListener(ev, handler, false);
} else if (elem.attachEvent) {
elem.attachEvent("on" + ev, handler);
} else elem["on" + ev] = handler;
});
}
function offListener(elem, evstr, handler) {
if (type(evstr) == "object") {
return each(evstr, function(evstr, handler) {
offListener(elem, evstr, handler);
});
}
each(evstr.split(" "), function(ev) {
if (elem.removeEventListener) {
elem.removeEventListener(ev, handler, false);
} else if (elem.detachEvent) {
elem.detachEvent("on" + ev, handler);
} else elem["on" + ev] = null;
});
}
function removeRange() {
var range;
if (ROOT.getSelection) {
range = getSelection();
if ("empty" in range) range.empty();
else if ("removeAllRanges" in range) range.removeAllRanges();
} else {
DOC.selection.empty();
}
}
function EASE(t, b, c, d) {
return -c * ((t = t / d - 1) * t * t * t - 1) + b;
}
function filterEvent(oldEvent) {
var ev = {},
which = oldEvent.which,
button = oldEvent.button,
pointers,
pointer;
each("wheelDelta detail which keyCode".split(" "), function(prop) {
ev[prop] = oldEvent[prop];
});
ev.oldEvent = oldEvent;
ev.type = oldEvent.type.toLowerCase();
ev.eventType = event2type[ev.type] || ev.type;
ev.eventCode = event2code[ev.type] || 0;
ev.pointerType =
POINTERTYPES[oldEvent.pointerType] ||
oldEvent.pointerType ||
ev.eventType;
ev.target =
oldEvent.target || oldEvent.srcElement || DOC.documentElement;
if (ev.target.nodeType === 3) {
ev.target = ev.target.parentNode;
}
ev.preventDefault = function() {
oldEvent.preventDefault && oldEvent.preventDefault();
ev.returnValue = oldEvent.returnValue = false;
};
if ((pointers = POINTERS[ev.eventType])) {
switch (ev.eventType) {
case "mouse":
case "pointer":
var id = oldEvent.pointerId || 0;
ev.eventCode == 3
? delete pointers[id]
: (pointers[id] = oldEvent);
break;
case "touch":
POINTERS[ev.eventType] = pointers = oldEvent.touches;
break;
}
if ((pointer = pointerItem(pointers, 0))) {
ev.clientX = pointer.clientX;
ev.clientY = pointer.clientY;
}
ev.button =
which < 4
? Math.max(0, which - 1)
: (button & 4 && 1) || button & 2; // left:0 middle:1 right:2
ev.length = pointerLength(pointers);
}
return ev;
}
struct.prototype = {
constructor: struct,
latestTime: 0,
init: function(config) {
var self = this,
handler = (this.handler = function(ev) {
self.handleEvent(ev);
});
this.events = {};
this.duration = isNaN(parseInt(config.duration))
? 600
: parseInt(config.duration);
this.current = parseInt(config.start) || 0;
this.mouse = config.mouse == null ? true : !!config.mouse;
this.interval = parseInt(config.interval) || 5000;
this.playing = config.autoplay == null ? true : !!config.autoplay;
this.arrowkey = !!config.arrowkey;
this.pages = children(this.container);
this.length = this.pages.length;
this.pageData = [];
addListener(
this.container,
STARTEVENT.join(" ") + " click",
handler
);
addListener(
DOC,
MOVEEVENT.join(" ") + (this.arrowkey ? " keydown" : ""),
handler
);
addListener(ROOT, "resize", handler);
each(this.pages, function(page) {
self.pageData.push({
cssText: page.style.cssText || ""
});
});
this.pageData.container = this.container.style.cssText || "";
this.on({
before: function() {
clearTimeout(this.playTimer);
},
dragStart: function() {
clearTimeout(this.playTimer);
removeRange();
},
after: this.firePlay
}).firePlay();
this.resize();
},
resize: function() {
var self = this,
pst = getStyle(this.container, "position"),
css;
this.size = this.getSize(
(this.offsetParent =
this.container[
pst == "absolute" || pst == "fixed"
? "offsetParent"
: "parentNode"
] || DOC.body)
);
css = {
float: "left",
display: "inline"
};
each(this.pages, function(page) {
css["width"] =
self.size -
self.getMarginSize(page) -
self.getPaddingSize(page) -
self.getBorderSize(page) +
"px";
setStyle(page, css);
});
this.total = this.getSum(0, this.length);
css = {};
if (pst == "static") {
css = { position: "relative" };
}
css[transition] = "none";
css["width"] = this.total + "px";
css["left"] = this.getPos(this.current) + "px";
cancelFrame(this.timer);
setStyle(this.container, css);
clearTimeout(this.playTimer);
return this.firePlay();
},
on: function(ev, callback) {
var self = this;
if (type(ev) == "object") {
each(ev, function(ev, callback) {
self.on(ev, callback);
});
} else {
if (!this.events[ev]) {
this.events[ev] = [];
}
this.events[ev].push(callback);
}
return this;
},
fire: function(ev) {
var self = this,
args = slice.call(arguments, 1);
each(this.events[ev] || [], function(func) {
if (isFunction(func)) {
func.apply(self, args);
}
});
return this;
},
isStatic: function() {
return !this.timer && !this.drag;
},
prev: function() {
return this.slide((this.current - 1 + this.length) % this.length);
},
next: function() {
return this.slide((this.current + 1) % this.length);
},
play: function() {
this.playing = true;
return this.firePlay();
},
firePlay: function() {
var self = this;
if (this.playing) {
this.playTimer = setTimeout(function() {
self.next();
}, this.interval);
}
return this;
},
pause: function() {
this.playing = false;
clearTimeout(this.playTimer);
return this;
},
slide: function(_index) {
var self = this,
stime = +new Date(),
duration = this.duration,
current = this.current,
index = Math.min(Math.max(0, _index), this.length - 1),
curSize = this.getSum(index, index + 1),
curPos = parseFloat(getStyle(this.container, "left")) || 0,
css = {},
tarPos;
tarPos = this.getPos(index);
duration *= Math.min(1, Math.abs(tarPos - curPos) / curSize) || 10;
this.current = index;
this.latestTime = stime + duration;
this.fire("before", current, index);
this.end = function() {
delete self.timer;
self.fire("after", index, current);
};
if (transition) {
this.timer = 1;
css[transition] = "left " + duration + "ms ease";
css["left"] = tarPos + "px";
setStyle(this.container, css);
} else {
cancelFrame(this.timer);
ani();
}
function ani() {
var offset = Math.min(duration, +new Date() - stime),
s = EASE(offset, 0, 1, duration);
cp = (tarPos - curPos) * s + curPos;
self.container.style["left"] = cp + "px";
if (offset == duration) {
self.end();
} else {
self.timer = nextFrame(ani);
}
}
},
handleEvent: function(oldEvent) {
var ev = filterEvent(oldEvent),
canDrag =
ev.button < 1 &&
ev.length < 2 &&
(!this.pointerType || this.pointerType == ev.eventType) &&
(this.mouse || ev.pointerType != "mouse");
switch (ev.eventCode) {
case 2:
if (canDrag && this.rect) {
var index = this.current,
rect = [ev.clientX, ev.clientY],
_rect = this.rect,
offset = rect[0] - _rect[0];
if (
this.drag == null &&
_rect.toString() != rect.toString()
) {
this.drag =
Math.abs(offset) >=
Math.abs(rect[1] - _rect[1]);
this.drag && this.fire("dragStart", ev);
}
if (this.drag) {
if (!this.pages[index + (offset > 0 ? -1 : 1)]) {
offset /= Math.abs(offset) / this.size + 2;
}
this.container.style["left"] =
this.startPos + offset + "px";
this.fire("dragMove", ev);
this._offset = offset;
ev.preventDefault();
}
}
break;
case 1:
case 3:
if (canDrag) {
var self = this,
index = this.current,
isDrag,
offset,
tm,
nn,
sub,
curPos,
tarPos,
myWidth;
if (ev.length && (ev.eventCode == 1 || this.drag)) {
nn = ev.target.nodeName.toLowerCase();
clearTimeout(this.eventTimer);
if (!this.pointerType) {
this.pointerType = ev.eventType;
}
this.startPos =
parseFloat(getStyle(this.container, "left")) ||
0;
if (transition) {
this.container.style[transition] = "none";
} else if (this.timer) {
cancelFrame(this.timer);
delete this.timer;
}
this.rect = [ev.clientX, ev.clientY];
this.time = +new Date();
this.container.style["left"] = this.startPos + "px";
if (
ev.eventType != "touch" &&
(nn == "a" || nn == "img")
) {
ev.preventDefault();
}
} else if ((tm = this.time)) {
offset = this._offset || 0;
isDrag = this.drag;
curPos = this.startPos + offset;
tarPos = this.getPos(index);
each(
"rect drag time startPos _offset".split(" "),
function(prop) {
delete self[prop];
}
);
if (isDrag) {
sub = offset > 0 ? 1 : -1;
while (
sub * (curPos - tarPos) >
this.getOuterSize(this.pages[index]) /
2 &&
this.pages[index - sub]
) {
tarPos = this.getPos((index -= sub));
}
if (
Math.abs(offset) > 20 &&
+new Date() - tm < 500
) {
index -= sub;
}
this.fire("dragEnd", ev);
ev.preventDefault();
}
if (curPos != tarPos) {
this.slide(index);
} else if (isDrag) {
this.firePlay();
}
this.eventTimer = setTimeout(function() {
delete self.pointerType;
}, 400);
}
}
break;
case 4:
if (this.timer) {
ev.preventDefault();
}
break;
case 5:
ev.preventDefault();
if (
this.isStatic() &&
+new Date() - this.latestTime >
Math.max(1000 - this.duration, 0)
) {
var wd = ev.wheelDelta || -ev.detail;
Math.abs(wd) >= 3 && this[wd > 0 ? "prev" : "next"]();
}
break;
case 6:
var nn = ev.target.nodeName.toLowerCase();
if (
this.isStatic() &&
nn != "input" &&
nn != "textarea" &&
nn != "select"
) {
switch (ev.keyCode || ev.which) {
case 33:
case 37:
case 38:
this.prev();
break;
case 32:
case 34:
case 39:
case 40:
this.next();
break;
case 35:
this.slide(this.length - 1);
break;
case 36:
this.slide(0);
break;
}
}
break;
case 7:
this.resize();
break;
case 8:
if (oldEvent.propertyName == "left") {
this.container.style[transition] = "none";
this.end();
}
break;
}
},
getSum: function(from, to) {
var sum = 0;
while (from < to) {
sum += this.getOuterSize(this.pages[from++], true);
}
return sum;
},
getPos: function(index) {
var myWidth = this.getOuterSize(this.pages[index], true),
sum =
this.getSum(0, index) +
this["getMarginLeftSize"](this.container) +
this["getBorderLeftSize"](this.container);
return -sum;
},
getOuterSize: function(elem, withMargin) {
return (
elem["offsetWidth"] +
(withMargin ? this.getMarginSize(elem) : 0)
);
},
getInnerSize: function(elem) {
return this.getOuterSize(elem) - this.getBorderSize(elem);
},
getSize: function(elem) {
return (
elem["offsetWidth"] -
this.getPaddingSize(elem) -
this.getBorderSize(elem)
);
},
destroy: function() {
var pageData = this.pageData;
offListener(
this.container,
STARTEVENT.join(" ") + " click",
this.handler
);
offListener(
DOC,
MOVEEVENT.join(" ") + (this.arrowkey ? " keydown" : ""),
this.handler
);
offListener(ROOT, "resize", this.handler);
each(this.pages, function(page, index) {
page.style.cssText = pageData[index].cssText;
});
this.container.style.cssText = pageData.container;
this.container.removeChild(this.comment);
this.length = 0;
return this.pause();
},
refresh: function() {
this.pages = children(this.container);
this.length = this.pages.length;
this.current = Math.max(Math.min(this.length - 1, this.current), 0);
return this.resize();
},
append: function(elem, index) {
if (null == index) {
index = this.pages.length;
}
this.pageData.splice(index, 0, {
cssText: elem.style.cssText || ""
});
this.container.insertBefore(elem, this.pages[index] || null);
return this.refresh();
},
prepend: function(elem) {
return this.append(elem, 0);
},
insertBefore: function(elem, index) {
return this.append(elem, index - 1);
},
insertAfter: function(elem, index) {
return this.append(elem, index + 1);
},
remove: function(index) {
this.container.removeChild(this.pages[index]);
this.pageData.splice(index, 1);
return this.refresh();
}
};
each("margin padding border".split(" "), function(type) {
each("Top Left Right Bottom".split(" "), function(dir) {
var prop = type + dir;
struct.prototype[camelCase("get-" + prop) + "Size"] = function(
elem
) {
return (
parseFloat(
getStyle(elem, prop + (type == "border" ? "Width" : ""))
) || 0
);
};
});
struct.prototype[camelCase("get-" + type) + "Size"] = function(elem) {
return (
this[camelCase("get-" + type) + "Left" + "Size"](elem) +
this[camelCase("get-" + type) + "Right" + "Size"](elem)
);
};
});
if (typeof define == "function" && define.amd) {
define("TouchSlider", function() {
return struct;
});
} else ROOT.TouchSlider = struct;
})(window, function(wrap, config) {
if (!(this instanceof arguments.callee)) {
return new arguments.callee(wrap, config);
}
this.container =
typeof wrap == "string" ? document.getElementById(wrap) : wrap;
this.init(config || {});
});
var thumbnails = document.querySelectorAll("#pagenavi a");
for (var i = 0; i < thumbnails.length; i++) {
var parent = document.getElementById("slider4");
var child = parent.querySelectorAll("li img");
thumbnails[i].style.cssText =
"background: url(" +
child[i].src +
") no-repeat center center; background-size: cover;";
}
var active = 0,
as = document.getElementById("pagenavi").getElementsByTagName("a");
for (var i = 0; i < as.length; i++) {
(function() {
var j = i;
as[i].onclick = function() {
t4.slide(j);
return false;
};
})();
}
var t4 = new TouchSlider("slider4", { speed: 1000, interval: 6000 });
t4.on("before", function(m, n) {
as[m].className = "";
as[n].className = "active";
});
!
