Exemples pour expliquer l'implémentation des fonctions de commutation automatique de musique et de carrousel à l'aide de JavaScript-js tutoriel-php.cn

Exemples pour expliquer l'implémentation des fonctions de commutation automatique de musique et de carrousel à l'aide de JavaScript

小云云

Libérer： 2017-12-28 09:25:41

original

1353 Les gens l'ont consulté

Cet article présente principalement JavaScript pour réaliser en détail la commutation automatique de la musique et les effets de carrousel. Il a une certaine valeur de référence. Les amis intéressés peuvent s'y référer.

En modifiant le src de la vidéo (cela devrait être le meilleur moyen d'économiser des ressources)

<!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>

Copier après la connexion

Recommandations associées :

Implémenter le code js de lecture de musique compatible avec divers navigateurs

Comment écrire un lecteur de musique Web en utilisant html5

JS Code d'implémentation pour ajouter une musique de fond aux boutons

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!