html手机端滑动图片效果,iSlider手机端图片滑动切换插件使用详解

自适应轮播图，支持手机触屏滑动，三种切换效果。

效果图：

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 ? '': '';

} else if (this.type === 'dom') {

html = '

' + item.content + '

';

} else if (this.type === 'overspread') {

html = this.ratio < 1 ? '

}

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：

Document

*{

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

}

//组件注册

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切换方式

//default：默认

//rotate：旋转

//flip：弹出

animateType: 'rotate',

//是否自动播放

isAutoplay: true,

//是否循环播放

isLooping: true,

// isVertical: true, 是否垂直滚动

});

islider1.bindMouse();

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。