IT博客汇 | 修改swiper 2.7.6版本在ie8下点击后停止自动切换的问题

修改swiper 2.7.6版本在ie8下点击后停止自动切换的问题

admin发表于 2016-11-09 11:03:55

前文“Swiper 循环切换回调实例”中介绍过一些用法。
Swiper 是个优秀的滑动插件插件，有两个版本。3.x版本兼容高版本浏览器 chrome、ie9+ （推测）,2.x版本兼容ie8等。
目前2.x已停止维护了，最新版本为 2.7.6.

问题描述：由于要兼容ie8故采用2.7.6版本。测试发现ie8下点击后停止自动切换的问题，chrome正常。
分析：
插件根据这个值 autoplayDisableOnInteraction 来决定用户操作后是否自动切换。在代码中找到，

            if (internal && !params.autoplayDisableOnInteraction) {
                _this.wrapperTransitionEnd(function () {
                    autoplay();
                });
            }

发现能正确执行到if条件中。但ie8下没有执行到autoplay()，继续分析_this.wrapperTransitionEnd，是由ie8不支持 transitionend 事件导致的。修改如下：

    _this.stopAutoplay = function (internal) {
        if (_this.support.transitions) {
            if (!autoplayTimeoutId) return;
            if (autoplayTimeoutId) clearTimeout(autoplayTimeoutId);
            autoplayTimeoutId = undefined;
            if (internal && !params.autoplayDisableOnInteraction) {
                _this.wrapperTransitionEnd(function () {
                    autoplay();
                });
            }
            _this.callPlugins('onAutoplayStop');
            if (params.onAutoplayStop) _this.fireCallback(params.onAutoplayStop, _this);
        }
        else {
            if (autoplayIntervalId) clearInterval(autoplayIntervalId);
            autoplayIntervalId = undefined;
            if (internal && !params.autoplayDisableOnInteraction) {
                _this.startAutoplay();
            }
            _this.callPlugins('onAutoplayStop');
            if (params.onAutoplayStop) _this.fireCallback(params.onAutoplayStop, _this);
        }
    };

swiper-2-7-7

Feed enhanced by Better Feed from Ozh