/**
* 이미지 스크롤 lib
*/
var time_line;
var key_ = 0;
/**
* 왼쪽이동 스크롤
* layer_back 후면 layer Element Id
* layer_front 앞면 layer Element ID
* tick 스크롤 간격 (1/1000 초)
* img_json json 형식으로 저장된 이미지 데이터 배열
* key 현재 배열의 key 값
*/
function scroll_move_left(layer_back, layer_front, tick, img_json, key) {
clearTimeout(time_line);
key = parseInt(key, 10);
$("#"+layer_front).animate({"left":0}, 1000, function(){
//에니메이션 종료 후, back layer의 위치를 조정한다.
$("#"+layer_back).css("left", 550).css("z-index", 50);
$(this).css("z-index", 10);
//Back Layer의 이미지와 링크를 변경한다.
$("#"+layer_back+"_src").attr("src", img_json[key].src);
$("#"+layer_back+"_href").attr("href", img_json[key].href);
//다음 key 값 변경
if (key < (img_json.length - 1)) {
key = key + 1;
} else {
key = 0;
}
key_ = key;
//다음 tick 후 이미지 변경
time_line = setTimeout(function() {
//back 과 fron 변경
scroll_move_left(layer_front, layer_back, tick, img_json, key);
}, tick);
});
}
/**
* 오른쪽 이동 스크롤
* layer_back 후면 layer Element Id
* layer_front 앞면 layer Element ID
* tick 스크롤 간격 (1/1000 초)
* img_json json 형식으로 저장된 이미지 데이터 배열
* key 현재 배열의 key 값
*/
function scroll_move_right(layer_back, layer_front, tick, img_json, key) {
clearTimeout(time_line);
key = parseInt(key, 10);
$("#"+layer_front).animate({"left":0}, 1000, function(){
//이미지 폭을 구함
var img_width = $("#"+layer_back+"_src").attr("width");
//에니메이션 종료 후, back layer의 위치를 조정한다.
$("#"+layer_back).css("left", ((img_width*-1) - 20)).css("z-index", 50);
$(this).css("z-index", 10);
//Back Layer의 이미지와 링크를 변경한다.
$("#"+layer_back+"_src").attr("src", img_json[key].src);
$("#"+layer_back+"_href").attr("href", img_json[key].href);
//다음 key 값 변경
if (key < (img_json.length - 1)) {
key = key + 1;
} else {
key = 0;
}
key_ = key;
//다음 tick 후 이미지 변경
time_line = setTimeout(function() {
//back 과 fron 변경
scroll_move_right(layer_front, layer_back, tick, img_json, key);
}, tick);
});
}
/**
* 스크롤을 위한 img 생성
* layer_id 생성할 layer의 id
* dir 이동 위치 up, down, left, right
* tick 간격 (1/1000)
* img_json 이미지 배열이 저장된 json
* img_width 폭
* img_height 높이
*/
function create_scroll_img(layer_id, dir, tick, img_json, img_width, img_height, key) {
var layer_1 = layer_id+"_1";
var layer_2 = layer_id+"_2";
var layer_3 = layer_id+"_3";
//다음 key 값 변경
if (key < (img_json.length - 1)) {
next_key = key + 1;
} else {
next_key = 0;
}
next_next_key = key + 2;
if (next_next_key >= (img_json.length - 1)) {
next_next_key = next_next_key - (img_json.length - 1);
}
key_ = next_key;
if (dir == "left") {
$("#"+layer_id).html("");
} else if (dir == "right") {
$("#"+layer_id).html("");
}
//다음 key 값 변경
if (next_key < (img_json.length - 1)) {
next_key = next_key + 1;
} else {
next_key = 0;
}
time_line = setTimeout(function() {
if (dir == "up") {
scroll_move_up(layer_1, layer_2, tick, img_json, next_key);
} else if (dir == "down") {
scroll_move_down(layer_1, layer_2, tick, img_json, next_key);
} else if (dir == "left") {
scroll_move_left(layer_1, layer_2, tick, img_json, next_key);
} else if (dir == "right") {
scroll_move_right(layer_1, layer_2, tick, img_json, next_key);
}
}, tick);
}
/**
* 마우스 클릭시
*/
function scroll_mouseclick(dir, key) {
clearTimeout(time_line);
if (dir == "left") {
create_scroll_img('teacher_layer_box', 'left', 1000, teacher, 400, 110, key);
} else if (dir == "right") {
create_scroll_img('teacher_layer_box', 'right', 1000, teacher, 400, 110, key);
}
}