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 ? 'this.height + '" src="' + item.content + '">': 'this.width + '" src="' + item.content + '">';
    } else if (this.type === 'dom') {
        html = '
';width:' + item.width + ';">' + item.content + '
';
    } else if (this.type === 'overspread') {
        html = this.ratio < 1 ? '
') center no-repeat; background-size:' + this.width + 'px auto;">
': '
') center no-repeat; background-size: auto ' + this.height + 'px;">
';
    }
    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：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Documenttitle>
    <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切换方式
            //default：默认
            //rotate：旋转
            //flip：弹出
            animateType: 'rotate',
            //是否自动播放
            isAutoplay: true,
            //是否循环播放
            isLooping: true,
            // isVertical: true, 是否垂直滚动
        });
        islider1.bindMouse();
    script>
body>
html>