STUDY_html_014_D.html
<html>
<meta charset="utf-8">
<script> りんく </script>
<style>
body{margin:0 auto;}
#あっとりびゅーと{margin:40 auto 20 auto;
height:500px;
width:900px;
border:2px solid #abcdef;}
#あっとりびゅーと img{position:absolute;
width:900px;
height:500px;}
#びょうしゃ{text-align:center;}
</style>
<script>
let 写真枚数=24;
let 最初の写真=0;
let 連写=12700;
let 上映=false;
let 入れ替え;
$(function(){for(let 愛=1;愛<=写真枚数;愛++)
{$("<img>").attr("src","STUDY_fanfare_"+愛+".jpg");}
$("#あっとりびゅーと img").attr("src","STUDY_fanfare_1.jpg");
$("#次へ").click(function()
{if(最初の写真<写真枚数)
{最初の写真++;}
else{最初の写真=1;};
閲覧(最初の写真);});
$("#もどる").click(function()
{if(最初の写真==1)
{最初の写真=写真枚数;}
else{最初の写真--;}
閲覧(最初の写真);});
$("#ぼたん").click(function()
{すらいど();});});
function 閲覧(番号)
{newSlideSrc="STUDY_fanfare_"+番号+".jpg"
$("<img>")
.attr("src",newSlideSrc)
.prependTo("#あっとりびゅーと");
$("#あっとりびゅーと img:last").fadeOut("slow",function()
{$(this).remove();});}
function すらいど()
{if(上映){$("#ぼたん").val(" Play ▷ ");
$("#次へ").removeAttr('disabled');
$("#もどる").removeAttr('disabled');
clearTimeout(入れ替え);
上映=false;}
else{$("#ぼたん").val(" Stop ■ ");
$("#次へ").attr('disabled','disabled');
$("#もどる").attr('disabled','disabled');
上映=true;
slideLoop();}}
function slideLoop()
{if(最初の写真<写真枚数)
{最初の写真++;}
else{最初の写真=1;};
閲覧(最初の写真);
入れ替え=setTimeout("slideLoop()",連写);}
</script>
<div id="あっとりびゅーと"><img src="STUDY_fanfare_1.jpg"></div>
<div id="びょうしゃ">
<input type="button"value=" ◀ Top "id="りろーど"style="color:blue;font-weight:bold;font-size:20px;">
<input type="button"id="もどる"value=" ← Back ">
<input type="button"id="次へ"value="Next → ">
<input type="button"id="ぼたん"value=" Play ▷ "style="color:red;font-weight:bold;font-size:20px;">
<audio controls style="vertical-align:middle;">
<source src="Olympic_F.mp3">
</audio>
</div>
<hr style="margin-top:40px;">
<p style="text-align:center;margin-top:20px;">楽曲の構成</p>
<p style="text-align:center;"><img src="STUDY_fanfare_analyzed.jpg"></p>
<script>
let りろーど=document.getElementById("りろーど");
りろーど.addEventListener("click",function(){location.reload();});
</script>
</html>
<style>
body{margin:0 auto;}
#あっとりびゅーと{margin:40 auto 20 auto;
height:500px;
width:900px;
border:2px solid #abcdef;}
#あっとりびゅーと img{position:absolute;
width:900px;
height:500px;}
#びょうしゃ{text-align:center;}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
sample_STUDY_html_014_D 
サンプル・ダウンロード 
