カルーセル効果を実現するためのネイティブJavaScript+CSS

<ul id="バナー" ></ul>

ul{
    リストスタイル:なし;
    位置: 絶対;
    パディング: 0;
    左: 0;
    右: 0;
    下部: 0;
    トップ:0;
    マージン:自動;
    幅: 800ピクセル;
    高さ:200px;
}

//カルーセルエクスポート関数を生成するgenerateBanner(){
  sz = new Array() とします。
  cur_ul = document.getElementById('バナー');
  const 推奨 = this.recommends;

  タイマーをsetInterval(getNextLi, 3000);に設定します。

  //カルーセル画像を生成する
  (i = 0 とします; i < 推奨長さ; i++) {
    //タグを生成する let cur_li = document.createElement("li");
    cur_img = document.createElement("img"); とします。
    //属性を追加 cur_img.src = recommends[i].pic;
    //スタイルを追加 cur_li.style.position = 'absolute';
    cur_li.style.left = '0px';
    cur_li.style.transitionDuration = '0.4s';
    cur_li.style.cursor="ポインター";

    //ul 合計幅 800、完全な 400px が 1 つと不完全な 200px が 2 つ表示
    cur_img.style.width = '125px';
    cur_img.style.height = "100px";

    //子要素を追加します cur_li.appendChild(cur_img);
    cur_ul.appendChild(cur_li);

    //操作を簡単にするためにすべてを配列に入れる sz.push(cur_li);
  }

  // 2 つのアイコンを生成します generateAngleIcons();

  //最後の3つの画像を使用して表示します。let len ​​= sz.length - 1;
  //最後から3番目 showThreeLi();

  //次のli表示を取得し、最初のものを配列の末尾に配置します。関数getNextLi() {
    li = sz[0];
    sz = sz.スライス(1);
    sz.push(li);

    //すべてのliが復元されます for (let i = 0; i < sz.length; i++) {
      //すべてのliは元のサイズに復元されます sz[i].style.transform = "scale(1)";
      sz[i].style.left = "0px";
      //liは小さいものから大きいものまでカバーします sz[i].style.zIndex = i;

      //すべて非表示 sz[i].style.display = "none";
    }
    //最後の3枚の写真を表示します。showThreeLi();

  }

  //最後の3枚の写真を表示する function showThreeLi() {
    sz[len - 2].style.left = "0px";
    //最後から2番目の画像 sz[len - 1].style.left = "120px";
    sz[長さ - 1].style.zIndex = 100;
    sz[len - 1].style.transform = "scale(1.3)";
    // 最後の sz[len].style.left = "230px";

    //ディスプレイ sz[len - 2].style.display = "block";
    sz[len - 1].style.display = "ブロック";
    sz[len].style.display = "ブロック";
  }


  関数generateAngleIcons(){
    const icons = 新しい配列();

    (i = 0; i < 2; i++ とします) {
      //アイコンを生成する
      cur_li = document.createElement("li"); とします。
      //スタイルを追加 cur_li.style.position = 'absolute';
      cur_li.style.top = '0px';
      cur_li.style.bottom = '0px';
      cur_li.style.margin = "自動";
      cur_li.style.paddingTop="100px";
      cur_li.style.paddingBottom="100px";
      cur_li.style.zIndex = 20;
      アイコンをプッシュします(cur_li);
    }

    アイコン[0].style.left = '0px';
    アイコン[1].style.right = '0px';
    icons[0].innerHTML = '<i class="angle left icon"></i>'
    icons[1].innerHTML = '<i class="angle right icon"></i>'
    cur_ul.appendChild(アイコン[1]);
    cur_ul.appendChild(アイコン[0]);
  }
}