画像によるスライドショー
http://smallwebmemo.blog113.fc2.com/blog-entry-333.html
上記のURLを参考に画像によるスライドショーを作成しました。
これを改良して、時間や日にちによって画像が自動変更するようにしたです。
javascriptファイルの記述でdocument.getElementById("slideshow").innerHTMLを使って表示させようとしたのですがうまく行きません。
困っています。
------------------------------test.js------------------------
window.onload = function() {
var dbData = new Array();
dbData.push({"namae":"取替えステップ その1", "photos":"photos/step_01.jpg", "setumei":"通し棒の付いた方をパンツの通し口から挿入します。", "thumbnails":"thumbnails/step_01_thumb.jpg"});
dbData.push({"namae":"取替えステップ その2", "photos":"photos/step_02.jpg", "setumei":"通し棒を1周させます。", "thumbnails":"thumbnails/step_02_thumb.jpg"});
dbData.push({"namae":"取替えステップ その3", "photos":"photos/step_03.jpg", "setumei":"通し棒が1周したら通し棒とホックを外します。", "thumbnails":"thumbnails/step_03_thumb.jpg"});
dbData.push({"namae":"取替えステップ その4", "photos":"photos/step_04.jpg", "setumei":"ゴムの両端のホックを結合します。", "thumbnails":"thumbnails/step_04_thumb.jpg"});
dbData.push({"namae":"取替えステップ その5", "photos":"photos/step_05.jpg", "setumei":"パチン！ と音がしたら結合完了！", "thumbnails":"thumbnails/step_05_thumb.jpg"});
var msg = " ";
for (var i = 0; i < dbData.length; i++) {
msg += "<li>";
msg += "<h3>" + dbData[i].namae + "</h3>";
msg += "<span>" + dbData[i].photos + "</span>";
msg += "<p>" + dbData[i].setumei + "</p>";
msg += "<img src= '" + dbData[i].thumbnails + "' >";
msg += "</li>";
document.getElementById("slideshow").innerHTML= msg;
}
}
------------------------------html------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<title>かんたん取替えステップ</title>
<link rel="stylesheet" href="style.css">
<script type="text/javascript" src="test.js"></script>
</head>
<body>
<div id="title_area"></div>
<ul id="slideshow">
//ここにjavascriptのソースより表示したい画像を表示
</ul>
<div id="wrapper">
<div id="fullsize">
<div id="imgprev" class="imgnav"></div>
<div id="imglink"></div>
<div id="imgnext" class="imgnav"></div>
<div id="image"></div>
<div id="information">
<h3></h3>
<p></p>
</div>
</div>
<div id="thumbnails">
<div id="slideleft" title="Slide Left"></div>
<div id="slidearea">
<div id="slider"></div>
</div>
<div id="slideright" title="Slide Right"></div>
</div>
</div>
<script type="text/javascript" src="compressed.js"></script>
<script type="text/javascript">
$('slideshow').style.display='none';
$('wrapper').style.display='block';
var slideshow=new TINY.slideshow("slideshow");
window.onload=function(){
slideshow.auto=true;
slideshow.speed=5;
slideshow.link="linkhover";
slideshow.info="information";
slideshow.thumbs="slider";
slideshow.left="slideleft";
slideshow.right="slideright";
slideshow.scrollSpeed=4;
slideshow.spacing=5;
slideshow.active="#fff";
slideshow.init("slideshow","image","imgprev","imgnext","imglink");
}
</script>
</body>
</html>
----------------------------------------------------------------
上記のソースは、素人なりに考えて作ったのですが、やはり素人（泣）画像が表示されません。。
どなたか助けてください。
参考URLでもありましたら助かります。
