JavaScriptでスライドショーを作っているが、スタートボタンを押してもスライドが開始されない

以下のサイトを参考にして、JavaScriptでスライドショーを作っています。
参考サイト

問題なのは、指示通りに変更点は書き直してプログラムを書いたにもかかわらず、スタートボタンを押してもスライドが開始されないことです。

HTML
1<!DOCTYPE html>
2<head>
3<meta name="Content-Style-Type" content="text/css">
4</head>
5<body>
6<CENTER>
7
8<div class="photobox">
9   <img src="start.png" id="slideshow" alt="スライドショー表示領域">
10</div>
11<div class="controlbox">
12   <input type="button" value="- START -" onclick="startshow();">
13   <input type="button" value="- STOP -" onclick="stopshow();">
14</div>
15
16<style type="text/css"><!--
17   /* スライドショー表示領域 */
18   div.photobox {
19      text-align: center;
20   }
21   div.photobox img {
22      border: gray 3px solid;
23   }
24   /* 操作ボタン表示領域 */
25   div.controlbox {
26      text-align: center;
27      margin: 0.3em 0px 1em 0px;
28   }
29--></style>
30
31
32</CENTER>
33</body>
34</html>

JavaScript
1<script type="text/javascript"><!--
2   // 画像の数
3   var imgs = 4;
4   // 切替秒数(ミリ秒)
5   var inttime = 1000;
6   
7   // 関数１★指定番号の画像に差し替える関数
8   function showimage(num) {
9      var imagename = "./" + num + ".png";
10      document.getElementById('slideshow').src = imagename;
11   }
12   
13   // 関数２★1番画像から順に表示させる関数
14   var imgcount=1;
15   function slideimage() {
16      if( imgcount > imgs ) {
17         imgcount = 1;
18      }
19      showimage( imgcount );
20      imgcount++;
21   }
22   
23   // 関数３★スライドショーを開始する関数
24   var slideid;
25   function startshow() {
26      stopshow();
27      slideid = setInterval("slideimage()",inttime);
28   }
29
30   // 関数４★スライドショーを停止する関数
31   function stopshow() {
32      clearInterval(slideid);
33   }
34// --></script>
35

行動規範の内容に同意します

回答1件

ベストアンサー

HTMLからJavaScript呼び出してますか？

<!DOCTYPE html>
<head>
<meta name="Content-Style-Type" content="text/css">
<script type="text/javascript">
<!--
   // 画像の数
   var imgs = 4;
   // 切替秒数(ミリ秒)
   var inttime = 1000;

   // 関数１★指定番号の画像に差し替える関数
   function showimage(num) {
      var imagename = "./" + num + ".png";
      document.getElementById('slideshow').src = imagename;
   }

   // 関数２★1番画像から順に表示させる関数
   var imgcount=1;
   function slideimage() {
      if( imgcount > imgs ) {
         imgcount = 1;
      }
      showimage( imgcount );
      imgcount++;
   }

   // 関数３★スライドショーを開始する関数
   var slideid;
   function startshow() {
      stopshow();
      slideid = setInterval("slideimage()",inttime);
   }

   // 関数４★スライドショーを停止する関数
   function stopshow() {
      clearInterval(slideid);
   }
// -->
</script>
</head>
<body>
<CENTER>

<div class="photobox">
   <img src="start.png" id="slideshow" alt="スライドショー表示領域">
</div>
<div class="controlbox">
   <input type="button" value="- START -" onclick="startshow();">
   <input type="button" value="- STOP -" onclick="stopshow();">
</div>

<style type="text/css"><!--
   /* スライドショー表示領域 */
   div.photobox {
      text-align: center;
   }
   div.photobox img {
      border: gray 3px solid;
   }
   /* 操作ボタン表示領域 */
   div.controlbox {
      text-align: center;
      margin: 0.3em 0px 1em 0px;
   }
--></style>


</CENTER>
</body>
</html>

これで普通に動いてそうですけどいかがでしょう(画像表示されるまでは用意するのが手間だったので通信して取りに行ってそうなところまでしか見てません)

投稿2017/07/28 07:10