1. 이미지 슬라이드
2. 이미지 슬라이드 구현하는 방법
이전, 다음 버튼 클릭으로 이미지를 이동할 수 있어야한다.
이미지 하단의 버튼을 클릭하면 순서도에 일치하는 이미지를 확인 할 수 있어야한다.
이미지 슬라이드가 일정 시간마다 자동으로 변경되도록 하고, 일시정지 버튼을 클릭하면 슬라이드가 자동으로 변경되는 것을 제어할 수 있다.
3. 이미지 슬라이드 구현 과정에서 배운 기술
-
clientWidth
요소 내부 너비, 패딩이 포함되지만 테두리, 여백 및 세로 스크롤 막대는 제외
-
setInterval(함수, 시간)
함수를 지정한 시간 간격으로 반복저으로 호출 -
clearInterval()
이전에 설정된 시간이 지정된 반복 작업을 취소 -
createDocumentFragment()
메모리상에만 존재
(자바스크립트의 DOM 객체는 연산을 수행할 때마다 DOM tree라는 자료구조에 접근해야 하기 때문에 자바스크립트의 성능을 저하시키는 주된 요인 중 하나이다. 따라서, 자바스크립트의 성능을 최적화하기 위해서는 DOM 객체 접근을 최소화하도록 코드를 작성해야 한다.)
