도전! 크로켓 경기 소개 페이지 만들기 2 - 이미지 슬라이드 기능 구현하기

이제 이미지 슬라이드 기능을 구현해 보겠다.

---

 

 

 

 

이론 3 - 이미지 슬라이드 1

 

이미지가 3초 간격으로 넘어가도록 만들어보는 실습을 진행해 본다.

 

 

 

 

 

---

 

 

 

 

 

 

퀴즈 2 - 이미지 슬라이드 1

 

 

 

 

이 문제는 틀렸다. 조금 어려운 문제 같다.

---

 

 

 

 

 

 

---

 

 

 

 

 

프로젝트 2 - 이미지 슬라이드 기능 구현하기 1

 

---

 

JS 파일

---

 

 

 

 

1. 문제 살펴보기

슬라이스 기능이 있는 코드를 살펴보자.

 

이 부분을 선택해서 이미지가 크기만큼 왼쪽으로 이동하는 애니메이션을 구현할 것이다.

---

 

 

 

 

2. 애니메이션 이동 기능 구현하는 코드 작성하기

 

현재 슬라이드를 보여주는데 0번부터 설정하도록 저장했다. from과 to는 현재 위치에서 어디로 이동할지 알려주는 변수이다. 이미지가 계속 왼쪽으로 가야 하므로 -로 설정했다.

이미지가 이동하는 시간인 duration, 반복 주기 등도 이미 설정이 되어 있다. 마지막 슬라이드가 되었을 때 첫 번째 슬라이드로 바꿔준다.

---

 

 

 

 

3. 코드 실행해 보기

 

 

 

 

 

 

 

 

 

 

 

 

만약 duration을 2000으로 준다면 애니메이션이 느리게 실행된다. 이렇게 이미지가 3초 간격으로 바뀌고 있다.

---

 

 

 

학습을 마치고

이 학습을 진행하며 정말 많이 졸려서 잠을 잘까 말까 고민이 많이 되었다. 그래도 잠을 이기고 공부를 끝까지 했더니 배우는 것도 있고 뿌듯했다.

이제 프로젝트 실습이 3개 정도 남아있는데 남은 실습도 열심히 해볼 것이다. 실습 과제는 제출 버튼이 없어 실행만 해보면 된다.