이번 학습에서는 슬라이드쇼를 만들어 볼거야.
슬라이드쇼는 여러장의 그림을 순서대로 보여주는 것을 말해.
주로 홈페이지의 대문에 눈길을 끌기 위해 많이 사용해.

슬라이드쇼 효과를 만드는 방법도 참 여러가지가 있는데 우선 지금까지 배운 display를 none, block 으로 변경하는 기능을 이용해서 구현을 해볼거야.
먼저 이 효과를 구현하기 위한 논리의 흐름은 다음과 같아.
이제 코드를 봐야겠지? 중요 부분만 보자구.

....
<style>
.mySlides {display: none;} /*시작할 때는 전체그림 다 감추기*/
</style>
....
<div>
	<div class="mySlides"><img src="roll1.jpg" style="width:100%"></div>
	<div class="mySlides"><img src="roll2.jpg" style="width:100%"></div>
	<div class="mySlides"><img src="roll3.jpg" style="width:100%"></div>
</div>

<script>
let slideIndex = 0; // 첫째 그림부터 시작
showSlides(); // 함수실행

function showSlides() {
	let slides = document.getElementsByClassName("mySlides");
	for (let i = 0; i < slides.length; i++) {
		slides[i].style.display = "none";  // 전체 그림 감추기
	}
	slides[slideIndex].style.display = "block"; // 이번 순서 그림만 보이기 
	slideIndex++; // 그림순서 번호 1증가
	if (slideIndex >= slides.length) {slideIndex = 0}    
	setTimeout(showSlides, 3000); // 3초후 함수 다시 실행
}
</script>
​

body 부분을 보면 슬라이드쇼를 통해 보여줄 그림들은 모두 class="mySlides" 로 클래스가 지정되도록 했어.
그리고 함수를 시작하면 이 아래 명령으로 mySlides 클래스를 가진 모든 요소를 배열변수 slides 에 저장했어.

	let slides = document.getElementsByClassName("mySlides");
​

slides가 배열이니 slides[0] 은 roll1.jpg, slides[1] 은 roll2.jpg, slides[2] 은 roll3.jpg 이 되겠지?
전에도 설명했는데 배열에서 순서는 1 부터 시작이 아니고 0 부터 시작이야.

다음 for 문을 이용해서 그림 갯수를 하나씩 돌면서 style.display="none" 으로 일단 모든 그림을 감췄어.
그리고 이번에 보여줄 그림은 slides[slideIndex]야. 이 놈만 block 로 보이게 했어.
다음에 변수 slideIndex 를 1 증가 시키는데 이 번호가 다음 그림순서야.

그런데 1 증가했더니 그림갯수와 같아지면 다시 0 부터 시작하도록 했어.
예를들어 보여줄 그림이 3개이면 배열은 slides[0] slides[1] slides[2] 의 3개 요소에 담기잖아.
slides[2] 그림을 보여주고 slideIndex++ 를 하면 slideIndex 값은 3이 되는데 slides[3] 은 없거든?
그러니 다시 slideIndex=0 으로 바꿔서 처음 그림인 slides[0] 을 보여 주는거야.
그리고 마지막으로 setTimeout() 함수로 3초 후에 내함수를 다시 실행하는 거야.
이것을 계속 반복하는 거지.
이해 돼? 이제는 틀림없이 이해 될거라 믿어.

위 코드를 적용한 데모는 아래 링크에서 확인해 볼 수 있어.
http://yogibbs.kr/jsDemo/slideShow1-vanilla.html

그런데 위 데모 페이지를 보면 잘 바뀌기는 한데 약간 거슬리는 부분이 있지?
바로 그림이 바뀔 때 딱딱 끊기면서 바뀌는 것 같지 않아? 좀 더 부드럽게 바뀌면 어떨까?

■ fade 효과 주기

부드럽게 열리는 효과를 주기 위해서는 css 의 opacity 라는 속성을 사용해.
opacity 는 우리말로 '투명도' 라는 뜻이야.
0 ~ 1 사이의 값을 사용할 수 있는데 0 은 완전투명이고 1 은 불투명이야. 즉 1=100% 로 원래 색상이나 그림 그대로 보여주는 것이야.
그러니 0.5 로 지정하면 50% 투명이라고 할 수 있겠지?

위 코드를 아래와 같이 수정해 보자구.

....
<style>
.mySlides {display: none;}

.fade {
  animation-name: fade;
  animation-duration: 2s;
}

@keyframes fade {
  from {opacity: 0.2} 
  to {opacity: 1}
}
</style>
....
<div>
	<div class="mySlides fade"><img src="roll1.jpg" style="width:100%"></div>
	<div class="mySlides fade"><img src="roll2.jpg" style="width:100%"></div>
	<div class="mySlides fade"><img src="roll3.jpg" style="width:100%"></div>
</div>​

style 자리에 .fade 라는 클래스를 추가하고, 또 본문의 그림을 감싸는 div 에 이 fade 클래스를 적용시켰어.
(이때 이 fade 는 내가 지은 이름이야. 클래스 이름이야. 다른 이름을 사용해도 돼. 속성이름으로 오해하지 마.)

opacity 이외에도 몇가지 css 속성이 보이네?
그렇지만 대충 이름만 봐도 무슨 작동인지 짐작이 가지?
fade 클래스에 애니메이션 효과를 주는데 이 효과의 이름을 fade 로 정하고(animation-name:fade), 효과의 지속시간을 2초로 정했어.(animation-duration:2s)
그리고 그 아래 @keyframes 이라는 속성에서 이 fade 효과의 방법을 적어 두었어.
투명도가 0.2 에서 1로 변하게 해라... 그 뜻 같지?
이 @keyframes 은 지난 번에 배운 transition 과 함께 애니메이션 효과를 줄 때 많이 사용해.
주로 여러가지 복합적인 동작을 표현할 때 많이 사용해.
구글에서 검색하면 엄청나게 많은 설명과 예제를 볼 수 있을테니 여기서 @keyframes 설명은 생략할께.

자, 이제 효과를 주었으니 한 번 보자구.
아래 링크를 클릭해서 새로운 스타일이 적용된 슬라이드쇼를 확인해 봐.
http://yogibbs.kr/jsDemo/slideShow2-vanilla.html

어때? 한결 부드러워졌지?
이 효과로도 여러분을 만족 시키지 못한다면 다음 효과가 또 있어.
다음 장에서 설명할께..