【问题标题】：How do I make two images fade in/out repeatedly? [closed]如何使两个图像重复淡入/淡出？ [关闭]
【发布时间】：2018-06-10 02:55:39
【问题描述】：

我有两张图片：

图片 1：/assets/promo_xmas.png

图片 2：/assets/howtoplay.gif

我想让一个显示 10 秒然后隐藏，之后隐藏我希望第二个图像显示 10 秒然后隐藏，然后第一张图像显示 10 秒然后隐藏，我想要那个反复做永远。

图片 1 的 html 是：

<div id="howtogif" class="gif" style="margin-top: 33px; display: flex;">
    <img width="320" height="267" src="assets/howtoplay.gif">
</div>

图片2的html是：

<div id="promo" class="gif" style="margin-top: 33px; display: none;">
    <img width="320" height="267" src="assets/promo_xmas.png">
</div>

另外，如果你能告诉我如何使用淡出和淡入淡出来做到这一点。谢谢。

（请随意编辑以使其更易于理解）

【问题讨论】：

搜索 jquery 动画和操作。从那里开始。
简单易用的jQuery carsoule插件
@ZachM。好的，你有什么推荐的网站来解释 jquery 动画和操作吗？
另一种方式：CSS animation.
@AlivetoDie 我不想使用插件，但感谢您的建议。

标签： javascript jquery html image

【解决方案1】：

谷歌搜索轮播的第一反应：http://kenwheeler.github.io/slick/

例子：

<!DOCTYPE html>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="slick/slick.css"/>
    // Add the new slick-theme.css if you want the default styling
    <link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/>
</head>
<body>

<div class="your-class">
  <div id="howtogif" class="gif" style="margin-top: 33px; display: flex;">
    <img width="320" height="267" src="assets/howtoplay.gif">
  </div>
  <div id="promo" class="gif" style="margin-top: 33px; display: none;">
    <img width="320" height="267" src="assets/promo_xmas.png">
  </div>
</div>


<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="slick/slick.min.js"></script>

<script type="text/javascript">
    $(document).ready(function(){
        $('.your-class').slick();
    });
</script>
</body>
</html>

建议在外部 JavaScript 文件中添加最后一个脚本标记。

【讨论】：

这没有说明如何让它反复隐藏和显示..（如果它确实回复）

【解决方案2】：

这是一个基本的例子：

function showOne() {
  var img = $("img").eq(0);
  img.fadeIn('slow').delay('10000').fadeOut('slow', showTwo);
}

function showTwo() {
  var img = $("img").eq(1);
  img.fadeIn('slow').delay('10000').fadeOut('slow', showOne);
}

$(function() {
  $('img').hide();
  showOne();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="howtogif" class="gif" style="margin-top: 33px; display: flex;">
  <img width="320" height="267" src="http://via.placeholder.com/350x150?text=1">
</div>

<div id="promo" class="gif" style="margin-top: 33px;">
  <img width="320" height="267" src="http://via.placeholder.com/350x150?text=2">
</div>

【讨论】：

你认为使用css动画可行吗？如果是这样，请告诉我那将是多么令人惊奇：D，谢谢！
@TigerYT 查看我对 CSS 动画的回答

【解决方案3】：

CSS 动画

将两个图像包装在一个块元素中，该元素具有：position:relative
将两个图像设置为position:absolute
制作 2 个 @keyframes 和 animation: 10s infinite alternate
为每张图片分配一个@keyframe animation。
动画的 2 个属性是 opacity 和 z-index（z-index 仅在 2 帧上，因为只有 2 个状态真正低于或高于另一个定位元素）。

演示

#promo {
  margin-top: 33px;
  position: relative;
}

img {
  width: 320px;
  height: 267px;
  position: absolute;
}

.A {
animation: animA 10s infinite alternate;
}

.B {
animation: animB 10s infinite alternate;
}

@keyframes animA {
  0%, 25% {
    opacity: 0;
    z-index: 0;
  }
  50% {
    opacity: .5;
  }
  
  100% {
    opacity: 1;
    z-index: 1
  }
}

@keyframes animB {
  0%,25% {
    opacity: 1;
    z-index: 1;
  }
  50% {
    opacity: .5;
  }
 100% {
    opacity: 0;
    z-index: 0
  }
}

<figure id="promo">
  <img src="https://pockey.io/assets/promo_xmas.png" class='B'>




  <img src="https://pockey.io/assets/howtoplay.gif" class='A'>
</figure>

【讨论】：

效果很好，但我只能在“Awnsers”中放一个
对不起什么意思："...只能在“答案”中放一个？
我只能勾选一个答案
我明白了，好吧，AFAIK，通过单击向上的箭头（三角形）来支持答案或问题，答案是 10 分，问题是 5 分。然后接受（15 分）只有 OP（原始海报）才能通过单击复选标记获得最佳答案。此外，OP 也可以接受和投票（25 分）答案。当然，对于新帐户，这可能会有所不同。无论如何，我很高兴它有帮助，编码愉快。