cassy1003/gist:6115031

## gistfile1.txt
////  slideshow.html
<head>
  <meta charset="UTF-8">
  <title>スライドショー</title>
  <link rel="stylesheet" href="slideshow.css" type="text/stylesheet" media="all">
  <script type="text/javascript" src="slideshow.js"></script>
  <script type="text/javascript" src="image-database.js"></script>
</head>
<body onLoad="setThumbImages()">
  <img src="img/sample0.jpg" id="main">
  <div id="thumbArea"></div>
  <div id="see more" onClick="seeMore()">もっと見る</div>
</body>

////// slideshow.js
var mainImage = document.getElementById("main");
var thumbImages;

function setThumbImages() {
  var thumb = []
  for(var i in imageArray){
    // image tagを用意
    thumb.push('<img src="' + imageArray[i] + '_s.jpg" class="thumb" onClick="showImage(' + i + ')">');
  }
  // 文字列連結してthumbAreaにつっこむ
  document.getElementById("thumbArea").innerHTML(thumb.join(''));
  // showImageのたびにgetElementsしていたらコストになるので、ここで一回だけ行う
  thumbImages = document.getElementsByClassName("thumb")
}

function showImage(imageNo) {
  mainImage.src = imageArray[imageNo] + '.jpg';

  for (var i in thumbImages) {
    thumbImages[i].classList.remove("select");
  }

  thumbImages[imageNo].classList.add("select");
}

function seeMore() {
  // ここでサーバーのデータベースにリクエス
  // きっとこんなん。
  // images = sendRequest.getImages({userId: 001});
  //　返ってきたのをimageArrayに入れる。
  // mageArray.push(images);


  // thumbに追加表示
  setThumbImages();
}

///// image-database.js
var imageArray = ["img/sample0","img/sample1","img/sample2","img/sample3","img/sample4"];
	//// slideshow.html
	<head>
	<meta charset="UTF-8">
	<title>スライドショー</title>
	<link rel="stylesheet" href="slideshow.css" type="text/stylesheet" media="all">
	<script type="text/javascript" src="slideshow.js"></script>
	<script type="text/javascript" src="image-database.js"></script>
	</head>
	<body onLoad="setThumbImages()">
	<img src="img/sample0.jpg" id="main">
	<div id="thumbArea"></div>
	<div id="see more" onClick="seeMore()">もっと見る</div>
	</body>

	////// slideshow.js
	var mainImage = document.getElementById("main");
	var thumbImages;

	function setThumbImages() {
	var thumb = []
	for(var i in imageArray){
	// image tagを用意
	thumb.push('<img src="' + imageArray[i] + '_s.jpg" class="thumb" onClick="showImage(' + i + ')">');
	}
	// 文字列連結してthumbAreaにつっこむ
	document.getElementById("thumbArea").innerHTML(thumb.join(''));
	// showImageのたびにgetElementsしていたらコストになるので、ここで一回だけ行う
	thumbImages = document.getElementsByClassName("thumb")
	}

	function showImage(imageNo) {
	mainImage.src = imageArray[imageNo] + '.jpg';

	for (var i in thumbImages) {
	thumbImages[i].classList.remove("select");
	}

	thumbImages[imageNo].classList.add("select");
	}

	function seeMore() {
	// ここでサーバーのデータベースにリクエス
	// きっとこんなん。
	// images = sendRequest.getImages({userId: 001});
	//　返ってきたのをimageArrayに入れる。
	// mageArray.push(images);


	// thumbに追加表示
	setThumbImages();
	}

	///// image-database.js
	var imageArray = ["img/sample0","img/sample1","img/sample2","img/sample3","img/sample4"];