亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

用于創建幻燈片元素的 setInterval setTimeout 延遲和暫停

用于創建幻燈片元素的 setInterval setTimeout 延遲和暫停

aluckdog 2021-10-14 12:41:20
我有 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);
查看完整描述

2 回答

?
米琪卡哇伊

TA貢獻1998條經驗 獲得超6個贊

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


查看完整回答
反對 回復 2021-10-14
?
qq_花開花謝_0

TA貢獻1835條經驗 獲得超7個贊

你讓我以不同的方式思考這個問題,所以我設法解決了它只是做了一些改變


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


查看完整回答
反對 回復 2021-10-14
  • 2 回答
  • 0 關注
  • 209 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號