iSlider手机端图片滑动切换插件使用详解
here962464 人气:0自适应轮播图，支持手机触屏滑动，三种切换效果。
效果图：
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 height="' + this.height + '" src="' + item.content + '">': '<img width="' + this.width + '" src="' + item.content + '">';
} else if (this.type === 'dom') {
html = '<div style="height:' + item.height + ';width:' + item.width + ';">' + item.content + '</div>';
} else if (this.type === 'overspread') {
html = this.ratio < 1 ? '<div style="height: 100%; width:100%; background:url(' + item.content + ') center no-repeat; background-size:' + this.width + 'px auto;"></div>': '<div style="height: 100%; width:100%; background:url(' + item.content + ') center no-repeat; background-size: auto ' + this.height + 'px;"></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：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{
padding: 0;
list-style: none;
margin: 0;
}
/*容器高度*/
#iSlider-effect-wrapper {
height: 400px;
width: 500px;
margin: 0 auto;
margin-top: 4.6rem;
overflow: hidden;
position: relative;
}
.iSlider-effect ul{
list-style: none;
padding: 0;
margin: 0;
height: 100%;
overflow: hidden
}
.iSlider-effect li {
position: absolute;
margin: 0;
padding: 0;
height: 100%;
overflow: hidden;
display: -webkit-box;
-webkit-box-pack: center;
-webkit-box-align: center;
list-style: none
}
.iSlider-effect ul li img {
max-width: 100%;
max-height: 100%;
margin: 0;
padding: 0
}
.iSlider-effect div {
background-color: #fff;
padding: 3px
}
</style>
</head>
<body>
<script type="text/javascript" src="mobile_slider.js"></script>
<!--组件容器-->
<div id="iSlider-effect-wrapper"> </div>
<script>
//组件注册
var islider1 = new iSlider({
//节点获取
dom: document.getElementById("iSlider-effect-wrapper"),
//图片配置
data: [
{
content: "images/01.jpeg",
},
{
content: "images/04.jpg",
},
{
content: "images/05.jpg",
}
],
//播放间隔
duration: 3000,
//animateType切换方式
/https://img.qb5200.com/download-x/default：默认
//rotate：旋转
//flip：弹出
animateType: 'rotate',
//是否自动播放
isAutoplay: true,
//是否循环播放
isLooping: true,
// isVertical: true, 是否垂直滚动
});
islider1.bindMouse();
</script>
</body>
</html>
加载全部内容