Help us understand the problem. What is going on with this article?

javascriptでfadeするsliderを作ってみたmemo

More than 3 years have passed since last update.

とりあえすjavascriptはこんな感じです

  var fadeA = {
    width : 1000,
    height : 600,
    index : 0,
    parent : document.getElementById("slider-main"),
    activeA : document.querySelectorAll(".slider_img"),

    play : function(){

      for(var i = 0; i < fadeA.activeA.length-1; i++){
          fi = fadeA.activeA[i].classList;
          fi.add("fadeIn");
      }

      function interVal(){

        g = fadeA.parent.firstElementChild;
        j = g.nextElementSibling;
        j_ = j.classList;
        j_.add("fadeIn");
        d = fadeA.parent.appendChild(g);

      }
      // interVal();
      setInterval(interVal, 2000)
    },
  }
  fadeA.play();

続いて、cssです。

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.fadeIn {
  animation-name: fadeIn;
}

.fadeTarget{
  animation-duration: 1.5s;
  animation-fill-mode: both;
 }

後は、sliderをつくる時のhtmlやcssを書いて完成とゆう感じです。

Masaru_free
フロントエンド畑の住民です。 学習内容をアウトプットすべく利用しています。 エンジニアの方々のお役立っていれば幸いです。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away