Javascript:网站header幻灯片fade-in效果

Question

篇幅较长question-thank望各位看官先行！我正在做一个个人博客网站项目，在索引页面中，我想实现一个幻灯片 header （包含背景图片，标题和将用户重定向到实际 psot 的按钮）以动态显示特色博客文章.当 header 转换为另一个时，我还想要 fade-in 效果。 header 的 html 看起来像这样：

var slideIndex = 0;

function carousel() {
  var i;
  var x = document.getElementsByClassName("header-slide");
  for (i = 0; i < x.length; i++) {
    x[i].style.opacity = 0;
    x[i].style.display = "none";
  }
  slideIndex++;
  if (slideIndex > x.length) {
    slideIndex = 1;
  }
  x[slideIndex - 1].style.opacity = 1;
  x[slideIndex - 1].style.display = "block";
  setTimeout(carousel, 3000);
}

.header-1 {
  background-image: linear-gradient(rgba(0, 0, 0, 0.29), #000), url(background-image#1);
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  height: 100vh;
}

.header-2 {
  background-image: linear-gradient(rgba(0, 0, 0, 0.29), #000), url(background-image#2);
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  height: 100vh;
}

.header-3 {
  background-image: linear-gradient(rgba(0, 0, 0, 0.29), #000), url(background-image#3);
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  height: 100vh;
}

.header-style {
  display: none;
  transition: opacity .5s ease-in;
}

<div class="slideshow-container">
  <div class="header-slide">
    <header class="header-1">
      <nav>
        <div class="row">
          <ul class="main-nav">
            <li><a href="article_directory.html">Articles</a></li>
            <li><a href="http://collegiatecycling.org/accc/">Collegiate Racing</a></li>
            <li><a href="photo_gallery.html">Multimedia</a></li>
            <li><a href="current_projects.html">Current Porjects</a></li>
            <li><a href="get_in_touch.php">Get in touch</a></li>
            <li><a href="#first-footer-child">External</a></li>
          </ul>
        </div>
      </nav>
      <div class="hero-text-box">
        <h1>Article#1</h1>
        <a class="btn btn-full" href="#">Read full story</a>
      </div>
    </header>
  </div>

  <div class="header-slide">
    <header class="header-2">
      <nav>
        <div class="row">
          <ul class="main-nav">
            <li><a href="article_directory.html">Articles</a></li>
            <li><a href="http://collegiatecycling.org/accc/">Collegiate Racing</a></li>
            <li><a href="photo_gallery.html">Multimedia</a></li>
            <li><a href="current_projects.html">Current Porjects</a></li>
            <li><a href="get_in_touch.php">Get in touch</a></li>
            <li><a href="#first-footer-child">External</a></li>
          </ul>
        </div>
      </nav>
      <div class="hero-text-box">
        <h1>Article#2</h1>
        <a class="btn btn-full" href="#">Read more</a>
      </div>
    </header>
  </div>

  <div class="header-slide">
    <header class="header-3">
      <nav>
        <div class="row">
          <ul class="main-nav">
            <li><a href="article_directory.html">Articles</a></li>
            <li><a href="http://collegiatecycling.org/accc/">Collegiate Racing</a></li>
            <li><a href="photo_gallery.html">Multimedia</a></li>
            <li><a href="current_projects.html">Current Porjects</a></li>
            <li><a href="get_in_touch.php">Get in touch</a></li>
            <li><a href="#first-footer-child">External</a></li>
          </ul>
        </div>
      </nav>
      <div class="hero-text-box">
        <h1>Article#3</h1>
        <a class="btn btn-full" href="#">Read more</a>
      </div>
    </header>
  </div>
</div>

我已经有了下面的 js 脚本，它虽然嵌入在 html 文件中，但可以幻灯片显示 header，但无法实现 fade-in 效果。

我也想要fade-in效果，所以我添加了以下CSS代码。

通过以上措施，我的网站header仍然无法以fade-in效果幻灯片播放。我的问题是，似乎设置过渡属性不会改变任何东西，因为 header 不透明度被我的 js 脚本改变了（所以每次它从 0 变为 1 时， CSS 会处理它的变化）？感谢任何帮助！

Answer 1

使用css关键帧动画：

#header {
  animation: fade 5s ease-out infinite;
}

@keyframes fade {
  0% {
     opacity: .1
  }
  100% {
     opacity: 1
  }
}

<div id="header">
<img src="https://c1.staticflickr.com/5/4016/4543539771_1325623dd6.jpg"></img>
</div>

或者看看浏览器原生动画api：

The Web Animations API opens the browser’s animation engine to developers and manipulation by JavaScript.

This API was designed to underlie implementations of both CSS Animations and CSS Transitions, and leaves the door open to future animation effects.

It is one of the most performant ways to animate on the Web where supported, letting the browser make its own internal optimizations without hacks

https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API/Using_the_Web_Animations_API

Javascript:网站header幻灯片fade-in效果

Javascript: website header slideshow fade-in effect

html

javascript

css

frontend

slideshow