JSはタイムラインの自動再生を実現する

最近、次のような効果を実装しました。再生ボタンをクリックするとタイムラインの再生が開始され、一時停止をクリックすると現在の位置で停止し、もう一度再生をクリックすると現在の位置から再生が続行されます。対応する年をクリックして切り替えることもできます。再生は自動的に一時停止します。もう一度再生をクリックすると、現在の位置から開始されます。

<!DOCTYPE html>
<html>
 <ヘッド>
  <メタ文字セット="utf-8" />
  <タイトル></タイトル>
  <link rel="スタイルシート" type="text/css" href="fonts/iconfont.css" />
  <スタイルスコープ>
   ウル、
   李、
   html,
   体 {
    マージン: 0;
    パディング: 0;
   }
 
   #タイムライン {
    リストスタイル: なし;
    テキスト配置: 中央;
    背景: url('img/xuanduan.png') 9px 上繰り返しy;
   }
 
   #タイムライン li {
    背景画像: url('img/tuoyuan1.png');
    背景繰り返し: 繰り返しなし;
    背景位置: 0 15px;
    背景サイズ: 20px 20px;
    左パディング: 30px;
    高さ: 50px;
    行の高さ: 50px;
    色: #444;
    幅: 70ピクセル;
   }
 
   #タイムラインリップ{
    幅: 70ピクセル;
    カーソル: ポインタ;
    マージン: 0;
   }
 
   .biaoqian {
    背景: url('img/biaoqian.png') 2px 13px 繰り返しなし;
    ;
    背景サイズ: 60px 24px;
    色: #fff;
   }
 
   #タイムライン .selected {
    背景: url('img/tuoyuan2.png') 0 15px 繰り返しなし;
    背景サイズ: 20px 20px;
   }
 
   .スクロールシェル{
    幅: 100ピクセル;
    高さ: 96%;
    上マージン: 1.5%;
    左マージン: 20px;
    フロート: 左;
    オーバーフロー: 非表示;
   }
 
   .スクロール{
    幅: 118ピクセル;
    高さ: 103%;
    オーバーフロー:自動;
    オーバーフロー-x:非表示;
   }
  </スタイル>
 </head>
 <本文>
  <div class="scroll-shell">
   <ul style="" id="タイムライン" ref="タイムライン" @click="タイムライン($event)" class="スクロール">
 
   </ul>
   <i class="iconfont icon-bofang" id="bofangzanting" style="font-size: 38px;position: absolute;left: 25px;top: 91%;"></i>
  </div>
  <スクリプト>
   年を[2016、2017、2018、2019、2020、2021、2022]とします
   インデックスを0にする
   タイマーを null にする
   //時間軸に対応するliを作成する
   年.map(k => {
    createLi = document.createElement('li') を作成します。
    createP = document.createElement('p') とします。
    作成P.innerHTML = k
    Li を作成します。子を追加します (P を作成します)。
    タイムラインに子要素を追加します。
   })
   //デフォルトでは最初のものが選択されます var lis = document.querySelectorAll('#timeline li')
   lis[0].classList.add('選択済み')
   var ps = document.querySelectorAll('#タイムラインリップ')
   ps[0].classList.add('表裏')
 
   //クリックイベント。クリックすると対応するエフェクトに切り替わります。var ulElement = document.querySelector('#timeline')
   ulElement.onclick = 関数(e) {
    var lis = document.querySelectorAll('#timeline li')
    var ps = document.querySelectorAll('#タイムラインリップ')
    イベントをeとします || window.event
    ターゲットをevent.target || event.srcElementとします
    ターゲットタグ名 == 'P' の場合 {  
     クラス変更(ps, lis, ターゲット)
     (i = 0 とします; i < lis.length; i++) {
      console.log(lis[i].getAttribute('class'))
      if (lis[i].getAttribute('class') == 'selected') {
       // 再生ボタンをクリックしたときに再生を続行できるように、この時点でクリックされたインデックスを記憶します。index = i
       コンソール.log(インデックス)
       壊す;
      }
 
     }
    }
   }
   
   // 共通部分、すべてのスタイルをクリアし、クリック関数に対応するクラス名を追加します classChange(ps, lis, target) {
    ps.forEach(k => {
     k.classList.remove('biaoqian')
    })
    target.classList.add('biaoqian')
    lis.forEach(v => {
     v.classList.remove('選択済み')
    })
    target.parentNode.classList.add('選択済み')
   }
 
   //再生ボタンと一時停止ボタン let bofangzanting = document.getElementById('bofangzanting')
   if (bofangzanting) {
    bofangzanting.onclick = () => {
     if (bofangzanting.className.indexOf('bofang') != -1) {
      console.log('クリックして再生')
      console.log(タイマー)
      bofangzanting.classList.remove('icon-bofang')
      bofangzanting.classList.add('アイコンザンティング')
      if (タイマー == 未定義) {
       自動再生()
      }
     } それ以外 {
      console.log('クリックして一時停止')
      bofangzanting.classList.remove('icon-zanting')
      bofangzanting.classList.add('icon-bofang')
      if (タイマー) {
       タイマー = clearInterval(タイマー)
      } それ以外 {
       戻る
      }
     }
    }
   }
 
   //自動再生関数 autoPlay() {
    var lis = document.querySelectorAll('#timeline li')
    var ps = document.querySelectorAll('#タイムラインリップ')
    タイマー = setInterval(() => {
     console.log('自動再生!')
     （インデックス<ps.length-1）の場合{
       //次のclassChange(ps, lis, ps[index + 1])を実行します
      インデックス++
     } それ以外 {
       // 先頭にジャンプ index = 0                
      クラス変更(ps, lis, ps[インデックス])
     }
     コンソール.log(インデックス)
    }, 1000)
   }
  </スクリプト>
 </本文>
</html>

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません: