practice

　　　　

<html lang="ja">
<meta charset="utf-8">

<style>
ul{margin:0;
padding:0;
vertical-align:baseline;}
ul{list-style-type:none;}
.スコアリング{position:relative;
width:600px;
height:920px;
margin:0 auto;}
.スコアリング .大楽譜{position:relative;
top:0;
left:0;
width:100%;
height:100%;}
.スコアリング .大楽譜 li{position:absolute;
top:0;
left:0;
width:100%;
height:100%;
opacity:0;
transition:all 900ms;
pointer-events:none;}
.スコアリング .大楽譜 li.次へ{opacity:1;
z-index:1;
pointer-events:auto;}
.スコアリング .見る{width:100%;
text-align:center;
font-size:0;
background:#123456;}
.スコアリング .見る li{display:inline-block;
width:25%;
height:70px;
background:#456789;
cursor:pointer;
background-position:center;
background-size:cover;
box-sizing:border-box;
transition:opacity 500ms;
opacity:.5;}
.スコアリング .見る li:hover{opacity:1;}
.スコアリング .見る li.今{opacity:1;}
.スコアリング .やじるし{position:absolute;
top:70%;
font-size:20px;
cursor:pointer;
width:24px;
height:30px;
background:#123456;
color:#ffffff;
line-height:30px;
padding:5px;
transition:opacity 500ms;}
.スコアリング .やじるし:hover{opacity:.6;}
.スコアリング .やじるし#左矢印{left:0;
transform:translate(-100%,-50%);}
.スコアリング .やじるし#右矢印{right:0;
transform:translate(100%,-50%);}
.ナンバー{position:absolute;
width:600px;
letter-spacing:10px;}
span{letter-spacing:1px;}
audio{display:block;
margin:0 auto;}
</style>

<audio controls>
<source src="Ravel_String_Quartet.mp3">
</audio>
<div class="スコアリング">
<ul class="大楽譜"></ul>
<hr>
<ul class="見る"></ul>
<div class="ナンバー"> 1 2 3 4 5 6 7 8 9 <span>10</span> <span>11</span> <span>12</span> <span>13</span></div>
<p id="左矢印"class="やじるし">◀︎</p>
<p id="右矢印"class="やじるし">▶︎</p>
</div>

<script>
すこあ=["Ravel_s_01.png",
"Ravel_s_02.png",
"Ravel_s_03.png",
"Ravel_s_04.png",
"Ravel_s_05.png",
"Ravel_s_06.png",
"Ravel_s_07.png",
"Ravel_s_08.png",
"Ravel_s_09.png",
"Ravel_s_10.png",
"Ravel_s_11.png",
"Ravel_s_12.png",
"Ravel_s_13.png"];
for(愛=0;愛<すこあ.length;愛++)
{総譜=document.createElement("li");
総譜.innerHTML="<img src='"+すこあ[愛]+"'>";
document.getElementsByClassName("大楽譜")[0].appendChild(総譜);
見る=document.createElement("li");
見る.setAttribute("勉強",愛);
見る.style.backgroundImage="url("+すこあ[愛]+")";
見る.style.width=100/すこあ.length+"%";
document.getElementsByClassName("見る")[0].appendChild(見る);}
length=すこあ.length-1;
さむねいる=document.getElementsByClassName("大楽譜")[0].getElementsByTagName("li");
ちょいす=document.getElementsByClassName("見る")[0].getElementsByTagName("li");
いんでっくす=0;
取り替え=false;
let 移動;
さむねいる[いんでっくす].classList.add("次へ");
ちょいす[いんでっくす].classList.add("今");
function すらいだー(ばりゅー)
{if(取り替え)
{return false;}
取り替え=true;
さむねいる[いんでっくす].classList.remove("次へ");
ちょいす[いんでっくす].classList.remove("今");
いんでっくす=ばりゅー;
さむねいる[いんでっくす].classList.add("次へ");
ちょいす[いんでっくす].classList.add("今");
移動=setTimeout(function()
{取り替え=false;},600);}
document.getElementById("左矢印").addEventListener("click",function()
{学習=いんでっくす-1;
if(学習<0)学習=length;
すらいだー(学習);},false);
document.getElementById("右矢印").addEventListener("click",function()
{学習=いんでっくす+1;
if(学習>length)学習=0;
すらいだー(学習);},false);
for(合=0;合<ちょいす.length;合++)
{ちょいす[合].addEventListener("click",function()
{学習=Number(this.getAttribute("勉強"));
すらいだー(学習);},false);}
</script>

</html>