如何在超时时为图像更改设置动画

如何解决如何在超时时为图像更改设置动画

我使用的是 html/JavaScript 网页框架。我想为每个图像设置动画 setTimeout 函数。请帮帮我。

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

解决方法

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

$(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>