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

Question

我有 4 个元素水平分布，我想每 3 秒向左移动一次，第一个元素和第四个元素是相同的，所以当我们在第四个元素时，我要变回第一张没有动画，所以幻灯片循环播放。

第一张/第四张幻灯片停顿了两次。我正在寻找解决它的方法，我试图在 "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

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

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);

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

setInterval setTimeout delay and pause for creating slide elements

javascript

delay

settimeout

setinterval