jQuery image animation
- 이미지 src값의 증가하는 숫자의 범위는 0000~9999 까지로 하며 파일명 또한 0000~9999까지로 만든다. (네자리 숫자)
- imgname0000.jpg / imgname-0001.gif / imgname_0002.png…
- 이미지 확장자는 png/jpg/gif 로 한다.
- @var rePath; [첫번째 문자] ~ [4자리 숫자.] 전까지의 값을 반환
- (4자리 숫자.png/jpg/gif ([ex] 0000.jpg)는 반환값에 포함되지 않는다.)
;(function(global, $){
'use strict';
var plugin_name = 'animationImg';
var run = false;
if (!$.fn[plugin_name]) {
$.fn[plugin_name] = function(settings) {
if(!run) { //실행여부 체크
run = true;
var $this = $(this);
var path = $this.attr('src');
var rePath = /.+(?=[0-9]{4}.)/gm; //[첫번째 문자] ~ [4자리 숫자.] 전까지의 값을 반환 (4자리 숫자.png/jpg/gif (0000.jpg) 는 반환값에 포함되지 않는다.)
var matchPath = path.match(rePath); //4자리 숫자.확장자를 제외한 경로부분 반환
var reversePath = path.replace(rePath,''); //4자리 숫자.확장자 반환
matchPath = matchPath || ['null']; //에러 방지
var imgPath = matchPath[0]; //배열에서 값 가져오기
var reExtn = /[0-9]+/gm; //모든 숫자 선택
var imgExtn = reversePath.replace(reExtn,''); //4자리숫자.확장자 값에서 확장자만 반환
var arrImg = [];
var i;
var anim;
//기본값 설정 & 사용자 설정과 병합
var option = $.extend({
start: 0,
steps: 10,
duration: 30,
repeat: true,
delay: 0
}, settings);
//이미지 담아두기
for(i=option.start; i<option.steps+1; i++) {
if (i < 10) {
arrImg.push(imgPath + '000' + i + imgExtn);
} else if (i < 100) {
arrImg.push(imgPath + '00' + i + imgExtn);
} else if (i < 1000) {
arrImg.push(imgPath + '0' + i + imgExtn);
} else {
arrImg.push(imgPath + i + imgExtn);
}
}
if (matchPath[0] !== 'null') { //올바른 값일때만 실행
setTimeout(function(){
anim = setInterval(aniImg, option.duration);
function aniImg() {
option.start = option.start + 1;
if (option.start > option.steps) {
if (option.repeat) {
option.start = 0; //반복
} else {
clearInterval(anim); //정지
}
} else {
$this.attr('src',arrImg[option.start]);
}
}
}, option.delay);
}
//플러그인 종료
$.fn[plugin_name].destroy = function() {
clearInterval(anim);
run = false;
};
//jQuery 체이닝 설정
return this;
}
};
}
})(window, window.jQuery);
How to jQuery image animation
Specify target.
<img src="../images/animation_0000.png" class="animation_img">
Call .animationImg()
$(document).ready(function(){
$('.animation_img').animationImg({
steps: 45,
repeat: false
});
});
github - jquery.animationImg