0

我正在尝试为我的直播设置一个小动画，将 3 个图像从左侧滑到屏幕上，一旦所有 3 个图像都在屏幕上，让它们在那里停留大约 30 秒，然后滑出屏幕。我也希望这个 30 秒的动画每 15 分钟自动重播一次。

我创建了一个图像来更好地帮助描述我在这里为我的直播想要实现的目标。

http://imgur.com/a/qxZff

话虽这么说，我现在有一个有点工作的版本，但它目前只有一张图片，这里是代码：

<html>
  <head>
    <style>
    .wrapper {
        position: relative;
        overflow: hidden;
        width: 500px;
        height: 500px;
    }
    #slide {
        position: absolute;
        left: -300px;
        width: 300px;
        height: 75px;
        -webkit-animation: slide 30s 0s 1;
    }
    @keyframes slide {
	    0% { left: -330px }
        3% { left: 0px }
        97% { left: 0px }
        100% { left: -330px }
    }
    </style>
  </head>
  <body>
    <div class="wrapper">
      <img id="slide" src="http://i.imgur.com/38Tfglv.png" />
    </div>
  </body>
</html>

任何输入都会很棒。我对任何与代码相关的知识都非常有限，这只是我在互联网上搜索并试图弄清楚这一点。谢谢你的帮助！

4

1 回答 1

0

这对你有用。如果您需要了解它是如何工作的，请检查并告诉我。

$(document).ready(function(){
  
  var slideOutTime=2000; // 2 Seconds
  var slideInTime=2000;  // 2 Seconds
  var slideInAfterTime=5000;  // 5 Seconds
  var repeatSlidingTime=10000;  // 10 Seconds
  
  
  function slideImage(img){
    
    img.animate({left:'0px'},slideOutTime,function(){
      setTimeout(function(){slideBack(img);},slideInAfterTime);
    });
    
    var nxt=img.next();
      if(nxt.length>0){
        setTimeout(function(){
        slideImage(nxt);},(slideOutTime/2.5));
      }else{
        setTimeout(function(){startSliding();},repeatSlidingTime);
      }
  
    }
  
  function slideBack(img){
     img.animate({left:'-300px'},slideInTime);
  }
  
  function startSliding(){
    slideImage($('.slide:first'));
    }
  
  startSliding();
   
  
  
  
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
    <head>
        <style>
            .wrapper {
                position: relative;
                overflow: hidden;
                width: 500px;
                height: 500px;
            }

            .slide {
              left:-300px;
                position: absolute;
                width: 300px;
                height: 75px;                
            }
          .slide:nth-child(2) {top:100px;}
          .slide:nth-child(3) {top:200px;}

			
        </style>
    </head>
    <body>
        <div class="wrapper">
          <img class="slide" src="http://i.imgur.com/38Tfglv.png" />
          <img class="slide" src="http://i.imgur.com/38Tfglv.png" />
          <img class="slide" src="http://i.imgur.com/38Tfglv.png" />
        </div>

    </body>
</html>

于 2016-08-23T07:01:59.500 回答