JavaScriptでスライドショーを作る

by administrator

JavaScriptでスライドショーを作る

今回は、HTMLファイル内にJavaSctiptを書き込む、インラインスクリプトという方法でJavaSctiptの使い方をご紹介します。

JavaSctiptは、<script>～</script>で囲まれた部分に記述していきます。<script></script>の位置は、<body>～</body>間の後ろに書きます。

以下のコードをメモ帳などで作成し、「.html」ファイルで保存します。

HTMLファイルの使い方について詳細はこちら。

<!DOCTYPE html>
<html lang ="ja">
  <head>
    <meta charset = "utf-8">
    <title>スライドショー</title>
  </head>
  <body>
<div class="sliderbox">
   <!-- 最初に表示させる画像 -->
   <img src="../image/image1.jpg" id="slideshow"><br>
   <!-- スライドショーの開始・停止ボタン -->
   <input type="button" value="開始／停止" id="startstopbtn">
 </div>
   <script src = "../js/chenge_image.js"></script>
  </body>
</html>

上記のコードを.htmlファイルとして保存し、ブラウザでそのファイルを開くことでHello Worldと表示されます。