<이미지 갤러리의 기능>

1. 이미지를 마우스 선택 창으로 선택이 가능하다.
2. 마우스를 올려두면 이미지 확대된다.
3. select all 버튼과 unselect all버튼으로 이미지 전체 선택 및 해체가 된다.
4. slide show 버튼을 누르면 일정 시간 간격으로 이미지가 확대되어 넘어간다.

Part 1. 갤러리 틀 만들기

1> JSON으로 갤러리에 표시될 이미지 리스트 가져오기

[
  "./img/1.jpg",
  "./img/2.jpg",
  "./img/3.jpg",
  "./img/4.jpg",
  "./img/5.png",
  "./img/6.jpg",
  "./img/7.png",
  "./img/8.png",
  "./img/9.jpg",
  "./img/10.jpg",
  "./img/11.jpg",
  "./img/12.jpg"
]

2> 배열에서 개별 이미지에 접근

• AJAX를 위한 객체 생성

<script>
var req = new XMLHttpRequest();
</script>

• 요청의 방식과 얻어올 URL 설정

<script>
req.open("GET", "./json/img_list.json");
</script>

• 요청 전송

<script>
req.onreadystatechange = function(){
  if (this. readyState == 4) {
  console.log(this.response);
  }
}
req.send();
</script>

• 받아온 데이터를 파싱한다.

<script>
var data = JSON.parse(this.response);
</script>

• for 문을 이용해서 item을 살펴보면서 문서에 이미지를 추가한다.
• div 태그를 생성하고 div태그 안에 img 태그 생성하여 img를 추가해준다.

<script>
for(var i=0;i<data.length; i++) {
      var div = document.createElement("div")
      //div 태그 생성 후 변수에 저장
      div.setAttribute("class","image");
      //div 태그에 image라는 클래스 생성
      var img = document.createElement("img");
      //img 태그 생성 후 변수에 저장
      img.src = data[i]
      //img 소스에 data[i]를 할당해준다. 각각의 img url을 저장시켜준다.
      div.appendChild(img);
      //div태그 안에 appendChild를 사용해 img 태그를 넣어준다.
      document.body.appendChild(div)
      //body태그 안에 만들어진 div태그를 추가해준다.
          }
  }
}
</script>