自适应轮播图，支持手机触屏滑动，三种切换效果。
效果图：
js：
var iSlider = function(opts) { if (!opts.dom) { throw new Error("dom element can not be empty!"); } if (!opts.data || !opts.data.length) { throw new Error("data must be an array and must have more than one element!"); } this._opts = opts; this._setting(); this._renderHTML(); this._bindHandler(); }; iSlider.prototype._setting = function() { var opts = this._opts; this.wrap = opts.dom; this.data = opts.data; this.type = opts.type || 'pic'; this.isVertical = opts.isVertical || false; this.onslide = opts.onslide; this.onslidestart = opts.onslidestart; this.onslideend = opts.onslideend; this.onslidechange = opts.onslidechange; this.duration = opts.duration || 4000; this.log = opts.isDebug ? function(str) { console.log(str) }: function() {}; this.axis = this.isVertical ? 'Y': 'X'; this.width = this.wrap.clientWidth; this.height = this.wrap.clientHeight; this.ratio = this.height / this.width; this.scale = opts.isVertical ? this.height: this.width; this.sliderIndex = this.sliderIndex || 0; if (this.data.length < 2) { this.isLooping = false; this.isAutoPlay = false; } else { this.isLooping = opts.isLooping || false; this.isAutoplay = opts.isAutoplay || false; } if (this.isAutoplay) { this.play(); } this._setUpDamping(); this._animateFunc = (opts.animateType in this._animateFuncs) ? this._animateFuncs[opts.animateType] : this._animateFuncs['default']; this._setPlayWhenFocus(); }; iSlider.prototype._setPlayWhenFocus = function() { var self = this; window.addEventListener('focus', function() { self.isAutoplay && self.play(); }, false); window.addEventListener('blur', function() { self.pause(); }, false); } iSlider.prototype._animateFuncs = { 'default': function(dom, axis, scale, i, offset) { dom.style.webkitTransform = 'translateZ(0) translate' + axis + '(' + (offset + scale * (i - 1)) + 'px)'; }, 'rotate': function(dom, axis, scale, i, offset) { var rotateDirect = (axis == "X") ? "Y": "X"; var absoluteOffset = Math.abs(offset); var bdColor = window.getComputedStyle(this.wrap.parentNode, null).backgroundColor; if (this.isVertical) { offset = -offset; } this.wrap.style.webkitPerspective = scale * 4; if (i == 1) { dom.style.zIndex = scale - absoluteOffset; } else { dom.style.zIndex = (offset > 0) ? (1 - i) * absoluteOffset: (i - 1) * absoluteOffset; } dom.style.backgroundColor = bdColor || '#333'; dom.style.position = 'absolute'; dom.style.webkitBackfaceVisibility = 'hidden'; dom.style.webkitTransformStyle = 'preserve-3d'; dom.style.webkitTransform = 'rotate' + rotateDirect + '(' + 90 * (offset / scale + i - 1) + 'deg) translateZ(' + (0.888 * scale / 2) + 'px) scale(0.888)'; }, 'flip': function(dom, axis, scale, i, offset) { var rotateDirect = (axis == "X") ? "Y": "X"; var bdColor = window.getComputedStyle(this.wrap.parentNode, null).backgroundColor; if (this.isVertical) { offset = -offset; } this.wrap.style.webkitPerspective = scale * 4; if (offset > 0) { dom.style.visibility = (i > 1) ? 'hidden': 'visible'; } else { dom.style.visibility = (i < 1) ? 'hidden': 'visible'; } dom.style.backgroundColor = bdColor || '#333'; dom.style.position = 'absolute'; dom.style.webkitBackfaceVisibility = 'hidden'; dom.style.webkitTransform = 'translateZ(' + (scale / 2) + 'px) rotate' + rotateDirect + '(' + 180 * (offset / scale + i - 1) + 'deg) scale(0.875)'; }, 'depth': function(dom, axis, scale, i, offset) { var rotateDirect = (axis == "X") ? "Y": "X"; var zoomScale = (4 - Math.abs(i - 1)) * 0.15; this.wrap.style.webkitPerspective = scale * 4; if (i == 1) { dom.style.zIndex = 100; } else { dom.style.zIndex = (offset > 0) ? (1 - i) : (i - 1); } dom.style.webkitTransform = 'scale(' + zoomScale + ', ' + zoomScale + ') translateZ(0) translate' + axis + '(' + (offset + 1.3 * scale * (i - 1)) + 'px)'; }, 'tear': function(dom, axis, scale, i, offset) { var rotateDirect = (axis == "X") ? "Y": "X"; var zoomScale = 1 - (Math.abs(i - 1) * 0.2); this.wrap.style.webkitPerspective = scale * 4; if (i == 1) { dom.style.zIndex = 100; } else { dom.style.zIndex = (offset > 0) ? (1 - i) : (i - 1); } dom.style.webkitTransform = 'scale(' + zoomScale + ', ' + zoomScale + ') translateZ(0) translate' + axis + '(' + (offset + scale * (i - 1)) + 'px)'; } } iSlider.prototype._setUpDamping = function() { var oneIn2 = this.scale >> 1; var oneIn4 = oneIn2 >> 1; var oneIn16 = oneIn4 >> 2; this._damping = function(distance) { var dis = Math.abs(distance); var result; if (dis < oneIn2) { result = dis >> 1; } else if (dis < oneIn2 + oneIn4) { result = oneIn4 + ((dis - oneIn2) >> 2); } else { result = oneIn4 + oneIn16 + ((dis - oneIn2 - oneIn4) >> 3); } return distance > 0 ? result: -result; }; }; iSlider.prototype._renderItem = function(i) { var item, html; var len = this.data.length; if (!this.isLooping) { item = this.data[i] || { empty: true }; } else { if (i < 0) { item = this.data[len + i]; } else if (i > len - 1) { item = this.data[i - len]; } else { item = this.data[i]; } } if (item.empty) { return ''; } if (this.type === 'pic') { html = item.height / item.width > this.ratio ? '<img src="' + item.content + '">': '<img src="' + item.content + '">'; } else if (this.type === 'dom') { html = '<div>' + item.content + '</div>'; } else if (this.type === 'overspread') { html = this.ratio < 1 ? '<div></div>': '<div></div>'; } return html; }; iSlider.prototype._renderHTML = function() { var outer; if (this.outer) { this.outer.innerHTML = ''; outer = this.outer; } else { outer = document.createElement('ul'); } outer.style.width = this.width + 'px'; outer.style.height = this.height + 'px'; this.els = []; for (var i = 0; i < 3; i++) { var li = document.createElement('li'); li.style.width = this.width + 'px'; li.style.height = this.height + 'px'; this._animateFunc(li, this.axis, this.scale, i, 0); this.els.push(li); outer.appendChild(li); if (this.isVertical && (this._opts.animateType == 'rotate' || this._opts.animateType == 'flip')) { li.innerHTML = this._renderItem(1 - i + this.sliderIndex); } else { li.innerHTML = this._renderItem(i - 1 + this.sliderIndex); } } if (!this.outer) { this.outer = outer; this.wrap.appendChild(outer); } }; iSlider.prototype._slide = function(n) { var data = this.data; var els = this.els; var idx = this.sliderIndex + n; if (data[idx]) { this.sliderIndex = idx; } else { if (this.isLooping) { this.sliderIndex = n > 0 ? 0 : data.length - 1; } else { n = 0; } } this.log('pic idx:' + this.sliderIndex); var sEle; if (this.isVertical && (this._opts.animateType == 'rotate' || this._opts.animateType == 'flip')) { if (n > 0) { sEle = els.pop(); els.unshift(sEle); } else if (n < 0) { sEle = els.shift(); els.push(sEle); } } else { if (n > 0) { sEle = els.shift(); els.push(sEle); } else if (n < 0) { sEle = els.pop(); els.unshift(sEle); } } if (n !== 0) { sEle.innerHTML = this._renderItem(idx + n); sEle.style.webkitTransition = 'none'; sEle.style.visibility = 'hidden'; setTimeout(function() { sEle.style.visibility = 'visible'; }, 200); this.onslidechange && this.onslidechange(this.sliderIndex); } for (var i = 0; i < 3; i++) { if (els[i] !== sEle) { els[i].style.webkitTransition = 'all .3s ease'; } this._animateFunc(els[i], this.axis, this.scale, i, 0); } if (this.isAutoplay) { if (this.sliderIndex === data.length - 1 && !this.isLooping) { this.pause(); } } }; iSlider.prototype._bindHandler = function() { var self = this; var scaleW = self.scaleW; var outer = self.outer; var len = self.data.length; var startHandler = function(evt) { self.pause(); self.onslidestart && self.onslidestart(); self.log('Event: beforeslide'); self.startTime = new Date().getTime(); self.startX = evt.targetTouches[0].pageX; self.startY = evt.targetTouches[0].pageY; var target = evt.target; while (target.nodeName != 'LI' && target.nodeName != 'BODY') { target = target.parentNode; } self.target = target; }; var moveHandler = function(evt) { evt.preventDefault(); self.onslide && self.onslide(); self.log('Event: onslide'); var axis = self.axis; var offset = evt.targetTouches[0]['page' + axis] - self['start' + axis]; if (!self.isLooping) { if (offset > 0 && self.sliderIndex === 0 || offset < 0 && self.sliderIndex === self.data.length - 1) { offset = self._damping(offset); } } for (var i = 0; i < 3; i++) { var item = self.els[i]; item.style.webkitTransition = 'all 0s'; self._animateFunc(item, axis, self.scale, i, offset); } self.offset = offset; }; var endHandler = function(evt) { evt.preventDefault(); var boundary = self.scale / 2; var metric = self.offset; var endTime = new Date().getTime(); boundary = endTime - self.startTime > 300 ? boundary: 14; if (metric >= boundary) { self._slide( - 1); } else if (metric < -boundary) { self._slide(1); } else { self._slide(0); } self.isAutoplay && self.play(); self.offset = 0; self.onslideend && self.onslideend(); self.log('Event: afterslide'); }; var orientationchangeHandler = function(evt) { setTimeout(function() { self.reset(); self.log('Event: orientationchange'); }, 100); }; outer.addEventListener('touchstart', startHandler); outer.addEventListener('touchmove', moveHandler); outer.addEventListener('touchend', endHandler); window.addEventListener('orientationchange', orientationchangeHandler); }; iSlider.prototype.reset = function() { this.pause(); this._setting(); this._renderHTML(); this.isAutoplay && this.play(); }; iSlider.prototype.play = function() { var self = this; var duration = this.duration; clearInterval(this.autoPlayTimer); this.autoPlayTimer = setInterval(function() { self._slide(1); }, duration); }; iSlider.prototype.pause = function() { clearInterval(this.autoPlayTimer); }; iSlider.prototype.extend = function(plugin) { var fn = iSlider.prototype; Object.keys(plugin).forEach(function(property) { Object.defineProperty(fn, property, Object.getOwnPropertyDescriptor(plugin, property)); }) } iSlider.prototype.extend({ bindMouse: function() { var self = this; var scaleW = self.scaleW; var outer = self.outer; var len = self.data.length; var bDrag = false; var mouseStart = function(evt) { bDrag = true; self.pause(); self.onslidestart && self.onslidestart(); self.startTime = new Date().getTime(); self.startX = evt.clientX; self.startY = evt.clientY; var target = evt.target; while (target.nodeName != 'LI' && target.nodeName != 'BODY') { target = target.parentNode; } self.target = target; }; var mouseMove = function(evt) { if (bDrag) { evt.preventDefault(); self.onslide && self.onslide(); var axis = self.axis; var offset = evt['client' + axis] - self['start' + axis]; if (!self.isLooping) { if (offset > 0 && self.sliderIndex === 0 || offset < 0 && self.sliderIndex === self.data.length - 1) { offset = self._damping(offset); } } for (var i = 0; i < 3; i++) { var item = self.els[i]; item.style.webkitTransition = 'all 0s'; self._animateFunc(item, axis, self.scale, i, offset); } self.offset = offset; } }; var mouseEnd = function(evt) { evt.preventDefault(); bDrag = false; var boundary = self.scale / 2; var metric = self.offset; var endTime = new Date().getTime(); boundary = endTime - self.startTime > 300 ? boundary: 14; if (metric >= boundary) { self._slide( - 1); } else if (metric < -boundary) { self._slide(1); } else { self._slide(0); } self.isAutoplay && self.play(); self.offset = 0; self.onslideend && self.onslideend(); self.log('Event: afterslide'); }; outer.addEventListener('mousedown', mouseStart); outer.addEventListener('mousemove', mouseMove); outer.addEventListener('mouseup', mouseEnd); } })
html：