<html>
<body>
<div class="wrapper">
<div id="container">
<img src="images/pic-1.jpg">
<img src="images/pic-2.jpg">
<img src="images/pic-3.jpg">
<img src="images/pic-4.jpg">
<button id="prev">⟨</button> <!-- '&lang'은 엔티티 이름이다. 세미콜론은 붙여줘야된다. -->
<button id="next">⟩</button>
</div>
</div>
<script src="./js/slideshow.js"></script>
</body>
<Js>
const slides = document.querySelectorAll("#container > img");
const prev = document.querySelector("#prev");
const next = document.querySelector("#next");
let current = 0; //현재 이미지의 index
showSlide(current); //index를 참조해서 이미지를 출력해주는 함수
prev.addEventListener("click", prevSlide); //이전버튼을 눌렀을때 이벤트
next.addEventListener("click", nextSlide); //다음버튼을 눌렀을때 이벤트
/*showSlide함수는 먼저 모든 이미지의 display를 none으로 해놓고
해당 index이미지만 화면에 띄어둔다.*/
function showSlide(n) {
for (let i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slides[n].style.display = "block";
}
/*이전버튼을 눌렀을때 실행될 함수이며,
현재 index가 0일때 이전 버튼을 누르면 마지막 이미지가 출력돼야 하므로
slides.length에서 하나를 빼준다. (배열은 0부터 시작하므로)*/
function prevSlide() {
if (current > 0) current -= 1;
else current = slides.length - 1;
showSlide(current);
}
/*다음버튼이며 index가 마지막일때 다음 버튼을 누르면 첫번째 index로 가게 해주는게 포인트*/
function nextSlide() {
if (current < slides.length - 1) current += 1;
else current = 0;
showSlide(current);
}
<실행화면>
※ 본 포스팅은 개인 공부 기록을 목적으로 남긴 글이며 본 사실과 다른 부분이 있다면 과감하게 지적 부탁드립니다.
'Javascript > Javascript 기본' 카테고리의 다른 글
| Array 객체 (0) | 2020.07.26 |
|---|---|
| 생성자 함수를 사용해 객체생성 (0) | 2020.07.24 |
| 기념일 계산기 (0) | 2020.07.24 |
| 객체 (0) | 2020.07.23 |
| 숫자 맞추기 게임 (0) | 2020.07.23 |
댓글