我如何 animation 在超时时更改图像

Question

我正在使用 html/JavaScript web 框架。 我想为每个图像 setTimeout Function 设置 animation。 请帮帮我。

    <script>
    $( document ).ready(function() {
        setTimeout(function(){ 
           slide1();
        }, 5000);
    }); 
    
    function slide1(){
        
        $('.hero_section_top').css('background-image','url(images/slider/2.jpg)');
        setTimeout(function(){ 
           slide2();
        }, 5000);
    }
    function slide2(){
        $('.hero_section_top').css('background-image','url(images/slider/3.jpg)');
        setTimeout(function(){ 
           slide3();
        }, 5000);
    }
    function slide3(){
        $('.hero_section_top').css('background-image','url(images/slider/1.jpg)');
        setTimeout(function(){ 
           slide1();
        }, 5000);
    }
</script>

Answer 1

将所有图像放入数组中并检查循环期间的延迟以对每张幻灯片执行您想要的操作

 $(document).ready(function() { var bgImages = [ 'https://plchldr.co/i/500x250?text=Image2', 'https://plchldr.co/i/500x250?text=Image3', 'https://plchldr.co/i/500x250?text=Image1' ]; setTimeout(function(){ $(bgImages).each(function(index, value) { var loopDelay = (index++) * 5000; setTimeout(function(){ $('.hero_section_top').css({'background-image':'url(' + value + ')'}); //console.log(loopDelay); if (loopDelay === 0) { console.log('do something'); } else if (loopDelay === 5000) { console.log('do something else'); } else if (loopDelay === 10000) { console.clear(); console.log('loop done'); } }, (loopDelay)); }); }, 5000); });

 .hero_section_top { width:500px; height:250px; background-image:url('https://plchldr.co/i/500x250?text=Image1'); }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="hero_section_top"></div>