用于创建幻灯片元素的 setInterval setTimeout 延迟和暂停

Question

我有 4 个元素水平分布，我想每 3 秒向左移动一次，第 1 个元素和第 4 个元素是相同的，所以当我们在第 4 个元素时，我在没有动画的情况下改回第一个元素，所以幻灯片循环本身。发生的情况是第 1/4 张幻灯片两次暂停。我正在寻找一种方法来解决它，我尝试通过“if”在间隔期间更改“pause”var，但这似乎是不可能的。我试图在间隔内设置超时，但它们都并行工作function setIntervalX(callback, delay, repetitions) {var x = 0;var intervalID = window.setInterval(function () {   callback();   if (++x === repetitions) {       window.clearInterval(intervalID);   }}, delay);}比这个    var $post = $('.testi');var x = -100;var pause = 1500;setIntervalX(function () {    $post.css('transform', 'translateX(' + x + '%)');    if ( x == -400 ){        $('.testi').css('transition', '0s');        $('.testi').css('transform', 'translateX(0)');        x = -100;       }    else {    setTimeout(function(){        $('.testi').css('transition', '1.5s ease');        x = x - 100;    }, 1500);    }}, pause, 100);

Answer 1

当 x 达到 -400 时，您需要立即将其恢复到 -100，没有超时周期。

尝试这个：

var $post = $('.testi');

var x = -100;

var pause = 1500;

setIntervalX(function () {

    if ( x == -400 ){

        $('.testi').css('transition', '0s');

        $('.testi').css('transform', 'translateX(0)');

        x = -100;   

    }

    $post.css('transform', 'translateX(' + x + '%)');

    setTimeout(function(){

        $('.testi').css('transition', '1.5s ease');

        x = x - 100;

    }, 1500);

}, pause, 100);

Answer 2

你让我以不同的方式思考这个问题，所以我设法解决了它只是做了一些改变

var $post = $('.testi');

var x = -100;

var pause = 4000;

setIntervalX(function () {

    if (x == -400){

        $post.css('transition', '0s ease');

        $post.css('transform', 'translateX(0)');

        x = -100;

    };

    setTimeout(function(){

        $('.testi').css('transition', '1s ease');

        $post.css('transform', 'translateX(' + x + '%)');

        x = x - 100;

    }, 150)

}, pause, 100);