Question

我正在使用Swiper API在项目开始时做一个很酷的轮播，Swiper Sample

在我正在进行的项目中，我需要在拖动滑动的同时使用一些图像制作动画，这对于这些设置非常有效：

var bgAnim = function () {
    var opacity = (100 + (swiper.translate / 8)) / 100,
        move = swiper.translate / 4,
        tDur = $('.swiper-wrapper').css('transition-duration').slice(0, -1) * 1000; // ## problem to run AUTOPLAY
    if (move > 0) { move = 0 }
    if (move < -200) { move = -200 }
    if (opacity > 1) { opacity = 1 }
    if (opacity < 0) { opacity = 0; tDur = tDur / 2 }

    $('#girl-bg').animate({     // ## problem to run AUTOPLAY
        'left': move,
        'opacity': opacity
    }, tDur);

    $('#logo-bg').animate({     // ## problem to run AUTOPLAY
        'opacity': opacity
    }, tDur);
}

var swiper = new Swiper('.vision', {
    //autoplay: 500,
    autoplayDisableOnInteraction: false,
    slidesPerView: 3,
    spaceBetween: 24,
    freeMode: true,
    slidesOffsetAfter: 1000,
    onSetTranslate: bgAnim
});

问题是，当我使用autoplay时，它与我在代码段上方标记的两行冲突，如果我将"animate"和$('.swiper-wrapper').css('transition-duration')关闭，则效果很好，但我需要两者都为背景图像设置动画......

有人可以帮助我吗？

Answer 1

我找到了解决方案，我使用了一些方法和回调进行了自动播放，如下所示，它运行良好。（：

    var swiperAutoplay = function () {
            swiper.setWrapperTranslate(swiper.getWrapperTranslate() - 1);
            swiper.update(true);
            var autoTime = setTimeout(swiperAutoplay, 3);
            $(homeSwiper).children().click(function () {
                clearTimeout(autoTime);
            });
   };

    setTimeout(swiperAutoplay, 5000);

Swiper API - onSetTranslate回调停止运行

1 个答案: