[jquery] 이미지 파일명 숫자에 따른 애니메이션 효과

이미지 파일명을 숫자로 순서를 나누어

애니메이션 효과를 표현해야하는 경우가 있다.

1. 파일명 변경 프로그램으로 파일명을 편하게 바꾸자

아래 파일을 다운로드 하세요.

 DarkNamer 8216.exe

[변경취소] - 작업한 내용을 취소

[목록지우기] - 드래그 한 파일 목록 지우기

[직접바꾸기] - 파일 한개씩 입력한 파일명으로 변경

[목록정렬] - 원하는 정렬순으로 정렬

[경로명앞에] - 폴더이름을 파일이름 앞에 추가합니다.

[경로명뒤에] - 폴더이름을 파일이름 뒤에 추가합니다.

[경로통일] - 파일목록에 있는 파일들을 한 폴더명으로 통일합니다.

[확장자삭제] - 확장자를 삭제합니다.

[확장자추가] - 확장자를 입력한 글자로 추가합니다.

[확장자변경] - 확장자를 변경합니다.

2. setInterval 을 응용하자

var idx = 0;

setInterval(function(){

if(idx > 53) { //53은 해당 파일 갯수에 따라 다르게 지정

return;

};

$('.list img').attr('src',"./images/animation/01sec"+ idx +".png");

idx++;

},20)