Tutoriel sur la façon d'implémenter la commutation automatique de musique et le carrousel à l'aide de JavaScript-js tutoriel-php.cn

Tutoriel sur la façon d'implémenter la commutation automatique de musique et le carrousel à l'aide de JavaScript

小云云

Libérer： 2018-01-19 14:23:31

original

2372 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.

Préface : Il y a deux jours, un camarade de classe m'a demandé de changer automatiquement de musique et d'obtenir l'effet de boucle une fois toutes les chansons jouées. Je l'ai fait après quelques manipulations. Je l'ai soudainement vu alors que je nettoyais mon bureau aujourd'hui, je l'ai traîné dans la corbeille et j'ai pensé à écrire un blog pour le partager. Il existe de nombreuses façons de le mettre en œuvre, je vais le mettre en œuvre simplement ici.

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 :

Explication détaillée de l'exemple de commutation automatique MHA de l'architecture consul

Une méthode simple pour utiliser JS pour réaliser la commutation automatique des images après avoir cliqué sur un bouton

jQuery est une méthode d'implémentation de carrousel simple et pratique

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!