Heim > Artikel > Web-Frontend > Beispiele zur Erläuterung der Implementierung automatischer Musikumschaltung und Karussellfunktionen mittels JavaScript

Beispiele zur Erläuterung der Implementierung automatischer Musikumschaltung und Karussellfunktionen mittels JavaScript

小云云Original: 2017-12-28 09:25:411291Durchsuche

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

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>

Verwandte Empfehlungen:

JS-Code für die Musikwiedergabe implementieren, der mit verschiedenen Browsern kompatibel ist

So schreiben Sie einen Web-Musikplayer mit HTML5

JS Implementierungscode zum Hinzufügen von Hintergrundmusik zu Schaltflächen

Das obige ist der detaillierte Inhalt vonBeispiele zur Erläuterung der Implementierung automatischer Musikumschaltung und Karussellfunktionen mittels JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Detaillierte Beispiele für js, um einfache digitale Veränderungseffekte zu erzielenNächster Artikel：Detaillierte Beispiele für js, um einfache digitale Veränderungseffekte zu erzielen

In Verbindung stehende Artikel

Mehr sehen