用于创建幻灯片元素的 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);