Question

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

HTML

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

CSS

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

现在只剩下一个问题了。每隔一段时间（每5分钟左右），三个特定的GIF应该彼此相邻。在那之后，一切都应该像以前一样继续（随机GIF播放）。

我听说这应该可以通过叠加，或者有更好的选择吗？如果有可能，有人可以告诉我如何做到这一点吗？我在JS方面不太好，我很快就需要一个解决方案......

特定的GIF同时播放

0 个答案: