Javascript 同时播放特定GIF_Javascript_Html_Transition_Gif

Javascript 同时播放特定GIF

javascript html

Javascript 同时播放特定GIF,javascript,html,transition,gif,Javascript,Html,Transition,Gif,我有一个非常具体的问题，但如果你们中的一些人能帮助我，那就太好了。在很多帮助下，我能够编写一个代码，在不同的GIF播放一次后，可以随机更改它们。这个动画发生在三个相邻的不同GIF上。改变的关键是延迟，每个GIF的延迟都不同，这取决于它持续的时间。在GIF的更改之间还有一个jquery转换动画 HTML 现在只剩下一个问题了。每隔一段时间，比如每5分钟左右，三个特定的GIF应该一起玩。在这之后，一切都应该像随机GIF播放之前一样继续进行我听说这应该可以通过叠加实现，或者有更好的替代方案吗？如果可

我有一个非常具体的问题，但如果你们中的一些人能帮助我，那就太好了。在很多帮助下，我能够编写一个代码，在不同的GIF播放一次后，可以随机更改它们。这个动画发生在三个相邻的不同GIF上。改变的关键是延迟，每个GIF的延迟都不同，这取决于它持续的时间。在GIF的更改之间还有一个jquery转换动画

HTML

现在只剩下一个问题了。每隔一段时间，比如每5分钟左右，三个特定的GIF应该一起玩。在这之后，一切都应该像随机GIF播放之前一样继续进行

我听说这应该可以通过叠加实现，或者有更好的替代方案吗？如果可能的话，谁能告诉我怎么做？我的JS不是很好，我很快就需要一个解决方案…

这里没人能帮我吗？我绝望了！我想用覆盖层做，但我没法让它工作。但是，有可能通过叠加来解决这个问题吗？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>GIF</title>
<link href="styles/styles.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-2.1.4.min.js" type="text/javascript"></script>
<script type="text/javascript">

function swapImages(container){
      var $active = $(container + ' .active');

      if($(container + ' .active').next().length > 0) {
        var $next = $(container + ' .active').next();
      } else {
        var $next = $(container + ' img:first');
      }

      /* FADE EFFECT */      
      $active.fadeOut(function(){
        $active.removeClass('active');
        $next.fadeIn().addClass('active');
      });

      /* WITHOUT FADE EFFECT */
      //$active.removeClass('active');
      //$next.addClass('active');

      console.log( $($active).attr("data-delay") );
    }


$(document).ready(function() { 
  setInterval('swapImages("#left")',    $('#left .active').attr("data-delay")   );
  setInterval('swapImages("#middle")',  $('#middle .active').attr("data-delay") );
  setInterval('swapImages("#right")',   $('#right .active').attr("data-delay")  );  
});
</script>
</head>

<body>
<div class="center">

  <div class="item top" id="left">
    <img id="wechsel1" src="bilder/1/1.gif" data-delay="3500" class="active" />
    <img id="wechsel1" src="bilder/1/2.gif" data-delay="1400" />
    <img id="wechsel1" src="bilder/1/3.gif" data-delay="4000" />
  </div>

  <div class="item" id="middle">
    <img id="wechsel2" src="bilder/2/1.gif" data-delay="1800" class="active" />
    <img id="wechsel2" src="bilder/2/2.gif" data-delay="1800" />
    <img id="wechsel2" src="bilder/2/3.gif" data-delay="1800" />
  </div>

  <div class="item bottom" id="right">
    <img id="wechsel3" src="bilder/3/1.gif" data-delay="4300" class="active" />
    <img id="wechsel3" src="bilder/3/2.gif" data-delay="3100" />
    <img id="wechsel3" src="bilder/3/3.gif" data-delay="4100" />
  </div>

</div>
</body>
</html>

body {
    background-color:black;
}

.center {
  padding-top: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.item {
  width: 568px;
  height: 800px;
  max-width: 50%;
  margin-left: 10px;
  margin-right: 10px;
}

.top {
  width: 568px;
  height: 800px;
  align-self: flex-start;
}

.bottom {
  width: 568px;
  height: 800px;
  align-self: flex-end;
}

img {
  display: none;
  width: 100%; 
}
img.active {
  display:block;  
}