Tutorial zur Implementierung der automatischen Musikumschaltung und des Karussells mithilfe von JavaScript-js-Tutorial-php.cn

Tutorial zur Implementierung der automatischen Musikumschaltung und des Karussells mithilfe von JavaScript

小云云

Freigeben： 2018-01-19 14:23:31

Original

2320 Leute haben es durchsucht

Dieser Artikel stellt hauptsächlich JavaScript vor, um die automatische Musikumschaltung und Karusselleffekte im Detail zu realisieren. Ich hoffe, dass er jedem helfen kann.

Vorwort: Vor zwei Tagen bat mich ein Klassenkamerad, die Musik automatisch zu wechseln und den Effekt einer Schleife zu erzielen, nachdem alle Lieder abgespielt wurden. Ich habe es nach einigem Herumfummeln plötzlich gesehen, als ich meinen Desktop aufgeräumt habe, und habe darüber nachgedacht, einen Blog zu schreiben, um ihn zu teilen. Es gibt viele Möglichkeiten, es umzusetzen. Ich werde es hier einfach umsetzen.

Durch Ändern der Quelle des Videos (dies sollte die beste Möglichkeit sein, Ressourcen zu sparen)

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>welcome</title>
 <style type="text/css">
  .content {
   width: 600px;
   margin:0 auto;
   border:1px solid red;
  }
  .left-bar {
   width: 300px;
   height: 200px;
   float: left;
   border:1px solid red;
  }
  ul li {
   list-style: none;
   margin-top: 20px;
   cursor: pointer;
  }
  li:hover {
   color: orange;
  }
 </style>
</head>

<body>
<p class="left-bar">
 <ul>
  <li class="music-name">十年</li>
  <li class="music-name">朋友</li>
  <li class="music-name">勇气</li>
 </ul>
</p>
<p class="content">
 <video src="" id="video1" controls autoplay></video>
 <button id="btn">按钮</button>
</p>

<script>
 window.onload = function() {
  // 歌曲列表
  var music = [
   {id: 1, name:"十年"},
   {id: 2, name:"朋友"},
   {id: 3, name:"勇气"}
  ]
  // 记录当前是哪首歌曲
  var currentMusic = 0;
  // 获取DOM
  var oVideo1 = document.querySelector("#video1");
  // 初始化
  oVideo1.src = music[0].name + &#39;.mp3&#39;;

  // 歌曲结束事件
  oVideo1.onended = function() {
   currentMusic += 1;
   // 判断是否是最后一首
   if(currentMusic === music.length) {
    currentMusic = 0;
   }
   var sr = music[currentMusic].name + &#39;.mp3&#39;;
   this.src=sr;
  }

  // 获取左边歌曲列表的DOM
  var aList = document.getElementsByClassName("music-name");
  for(var i=0; i<aList.length; i++) {
   // 为了知道具体是那一个li
   aList[i].index = i;
   // 给每一个li设定一个事件
   aList[i].onclick = function() {
    oVideo1.src = music[this.index].name + ".mp3";
   }
  }
 }
</script>

</body>
</html>

Nach dem Login kopieren

Verwandte Empfehlungen:

Detaillierte Erläuterung des MHA-Beispiels für die automatische Umschaltung der Konsul-Architektur

Eine einfache Methode zur Verwendung von JS, um die automatische Umschaltung von Bildern nach dem Klicken auf eine Schaltfläche zu realisieren

jQuery ist eine einfache und praktische Karussell-Implementierungsmethode

Das obige ist der detaillierte Inhalt vonTutorial zur Implementierung der automatischen Musikumschaltung und des Karussells mithilfe von JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!