时间戳

首页 > 解决方案 > 用于创建幻灯片元素的 setInterval setTimeout 延迟和暂停

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

问题描述

我有 4 个元素水平分布，我想每 3 秒将它们向左移动，第一个元素和第 4 个元素是相同的，所以当我们处于第 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);

标签： javascriptsettimeoutdelaysetinterval

解决方案

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

推荐阅读