jQuery 05

이전, 다음 버튼을 눌러 이미지가 바뀌게 하기

내 코드

시작버튼을 눌러 자동으로 이미지가 계속 바뀌게 하기 - 이미지 계속 바뀌려면 setInterval()을 사용해야 한다

종료버튼을 눌러 바뀌던 이미지가 멈추게 하기 - clearInterval(참조변수)사용한다

이미지 경로를 객체로 선언한 코드

코드분석

이미지 경로를 객체로 선언하여 저장했다. 객체의 키를 불러와 키의 인덱스를 index 변수에 저장했다.

키의 인덱스를 불러오기 위해 변수명.indexof("키")함수를 사용했다.

실행화면

코드분석

img 태그의  src 속성에 대입할 이미지 경로를 배열로 선언했다 -> imgsList

배열의 인덱스처럼 사용할 now 변수를 선언했다.

clearInterval()를 사용하기 위해 imgChange를 선언하고 imgChange에 setInterval()을 대입했다.

now 변수가 이미지 경로 배열의 길이보다 크거나 같으면 now를 으로 '0'을 초기화하고 attr("src", "imgsList[now]")로 속성을 변경한다.

src 속성이 계속 바껴야 이미지가 바뀌므로 now++해서 imgsList 배열의 다른 이미지 경로로 속성이 바껴지게 한다.