/*========================================
js_rolling.js
#°£´Ü¼³¸í
¶ó°í ÇßÀ» °æ¿ì div¾ÈÀÇ img¸¦ À§,¿À¸¥ÂÊ,¾Æ·¡,¿ÞÂÊÀ¸·Î ·Ñ¸µ ½ÃŲ´Ù.
# »ç¿ë¹ý
//JS½ºÅ©¸³Æ® ·Îµå
//ó·³ ±¸¼ºÈÄ divÀÇ ³Êºñ¿Í ³ôÀÌ´Â ²À Á¤ÇØÁֱ⠹ٶø´Ï´Ù.
1
![]()
etc
2
3
4
ÀÌ·¸°Ô ±¸¼ºÇÒ °æ¿ì ¹æÇâÀº À§,¾Æ·¡·Î¸¸ °¡´ÉÇÕ´Ï´Ù
var roll = new js_rolling('rolling');
or
var roll = new js_rolling(document.getElementById('rolling'));
// idÀ̸§À» Àû´øÁö, Á÷Á¢ ´ë»óÀ» Áö¸ñÇؼ ·Ñ¸µ Ŭ·¡½º·Î °´Ã¼¸¦ ¸¸µë
roll.set_direction(4); // ¹æÇâÀ» ¹Ù²Þ. 1: top, 2:right, 3:bottom 4:left ±×¿ÜÀÇ °æ¿ì µ¿ÀÛ¾ÈÇÔ
roll.move_gap = 1; //¿òÁ÷ÀÌ´Â Çȼ¿´ÜÀ§
roll.time_dealy = 10; //¿òÁ÷À̴ ŸÀÓµô·¹ÀÌ
roll.time_dealy_pause = 5000;//ÇϳªÀÇ ´ë»óÀÌ »õ·Î ½ÃÀÛÇÒ ¶§ ¸ØÃß´Â ½Ã°£, 0 À̸é Àû¿ë ¾ÈÇÔ
roll.start(); //·Ñ¸µ µ¿ÀÛ
roll.move_up(); //À§·Î Çѹø ·Ñ¸µ (¹æÇâÀÌ top,bottonÀ϶§¸¸ µ¿ÀÛ)
roll.move_right(); //¿À¸¥ÂÊÀ¸·Î Çѹø ·Ñ¸µ(¹æÇâÀÌ right,leftÀ϶§¸¸ µ¿ÀÛ)
roll.move_down(); //¾Æ·¡·Î Çѹø ·Ñ¸µ(¹æÇâÀÌ top,bottonÀ϶§¸¸ µ¿ÀÛ)
roll.move_left(); //¿ÞÂÊÀ¸·Î Çѹø ·Ñ¸µ(¹æÇâÀÌ right,leftÀ϶§¸¸ µ¿ÀÛ)
roll.direction = {¹æÇâ¼ýÀÚ} //»ç¿ë½Ã ÁÖÀÇ : Ãʱâȸ¦ ½ÃÅ°Áö ¾Ê°í ¹æÇ⸸ ¹Ù²Ù´Â °ÍÀ¸·Î left:right , top:bottom À¸·Î¸¸ ¦À» ÀÌ·ï ½á¾ßÇÑ´Ù
roll.mouseover_pause = true , false //true¸é ¸¶¿ì½º¿À¹ö ½Ã ¸ØÃã(±âº»°ª), false ¸é ¸¶¿ì½º¿À¹ö¿¡¼µµ °è¼Ó ·Ñ¸µÇÔ
#ÁÖÀÇ
¹æÇâÀÌ top,bottomÀÏ °æ¿ì ³»ºÎ ű״ block¿ä¼Ò(div)·Î
¹æÇâÀÌ left,rightÀÏ °æ¿ì ³»ºÎű״ inline¿ä¼Ò(a,span)À¸·Î ÇØÁÖ¼¼¿ä.
FF¿¡¼ top,bottomÀÇ °æ¿ì inline¿ä¼ÒÀÏ °æ¿ì offsetHeight¸¦ À߸ø¾Ë¾Æ¿É´Ï´Ù.
À̹ÌÁö°¡ ³¡ ºÎºÐ¿¡¼ °©Àڱ⠳ªÅ¸³ª´Â Çö»óÀÌ ÀÖÀ» °æ¿ì ³»ºÎ À̹ÌÁöµéÀÇ ¼ö¸¦ 2¹è·Î ´Ã·ÁÁÖ¼¼¿ä.(1,2,3 À̸é 1,2,3,1,2,3 ó·³ º¸À̵µ·Ï)
#»ç¿ëÁ¦¾à
»ç¿ë½Ã "°ø´ë¿©ÀÚ´Â ¿¹»Ú´Ù"¸¦ ³ªÅ¸³»¼Å¾ßÇÕ´Ï´Ù.
¸¸µç³¯ : 2007-06-07
¼öÁ¤ÀÏ : 2007-08-11
¼öÁ¤ÀÏ : 2008-08-08
¸¸µçÀÌ : mins01,mins,°ø´ë¿©ÀÚ
ȨÆäÀÌÁö : http://www.mins01.com
NateOn&MSN : mins01(at)lycos.co.kr
========================================*/
var js_rolling = function(box){
// ½Ã°£´ÜÀ§´Â ms·Î 1000ÀÌ 1ÃÊ
if(box.nodeType==1){
this.box = box;
}else{
this.box = document.getElementById(box);
}
this.is_rolling = false;
this.mouseover_pause = true;
this.direction = 1; //1:top, 2:right, 3:bottom, 4:left (½Ã°è¹æÇâ) // 1¹ø°ú 4¹ø¸¸ µÊ
this.children = null;
this.move_gap = 1; //¿òÁ÷ÀÌ´Â Çȼ¿´ÜÀ§
this.time_dealy = 50; //10; //¿òÁ÷À̴ ŸÀÓµô·¹ÀÌ
this.time_dealy_pause = 2000; //2000;//ÇϳªÀÇ ´ë»óÀÌ »õ·Î ½ÃÀÛÇÒ ¶§ ¸ØÃß´Â ½Ã°£, 0 À̸é Àû¿ë ¾ÈÇÔ
this.time_timer=null;
this.time_timer_pause=null;
this.mouseover=false;
this.init();
this.set_direction(this.direction);
this.start();
}
js_rolling.prototype.init = function(){
this.box.style.position='relative';
this.box.style.overflow='hidden';
var children = this.box.childNodes;
for(var i=(children.length-1);0<=i;i--){
if(children[i].nodeType==1){
children[i].style.position='relative';
}else{
this.box.removeChild(children[i]);
}
}
var thisC=this;
this.box.onmouseover=function(){
if(!thisC.mouseover_pause){ return; }
thisC.mouseover=true;
if(!thisC.time_timer_pause){
thisC.pause();
}
}
this.box.onmouseout=function(){
if(!thisC.mouseover_pause){return;}
thisC.mouseover=false;
if(!thisC.time_timer_pause){
thisC.resume();
}
}
}
js_rolling.prototype.set_direction = function(direction){
this.direction=direction;
if(this.direction==2 ||this.direction==4){
this.box.style.whiteSpace='nowrap';
}else{
this.box.style.whiteSpace='normal';
}
var children = this.box.childNodes;
for(var i=(children.length-1);0<=i;i--){
if(this.direction==1){
children[i].style.display='block';
}else if(this.direction==2){
children[i].style.textlign='right';
children[i].style.display='inline';
}else if(this.direction==3){
children[i].style.display='block';
}else if(this.direction==4){
children[i].style.display='inline';
}
}
this.init_element_children();
}
js_rolling.prototype.init_element_children = function(){
var children = this.box.childNodes;
this.children = children;
for(var i=(children.length-1);0<=i;i--){
if(this.direction==1){
children[i].style.top='0px';
}else if(this.direction==2){
children[i].style.left='-'+this.box.firstChild.offsetWidth+'px';
}else if(this.direction==3){
children[i].style.top='-'+this.box.firstChild.offsetHeight+'px';
}else if(this.direction==4){
children[i].style.left='0px';
}
}
}
js_rolling.prototype.act_move_up = function(){
for(var i = 0,m=this.children.length;i=0){
this.box.insertBefore(this.box.lastChild,this.box.firstChild);
this.init_element_children();
this.pause_act();
}
}
js_rolling.prototype.move_down = function(){
if(this.direction!=1&&this.direction!=3){return false;}
this.box.insertBefore(this.box.lastChild,this.box.firstChild);
this.init_element_children();
this.pause_act();
}
js_rolling.prototype.act_move_left = function(){
for(var i = 0,m=this.children.length;i=0){
this.box.insertBefore(this.box.lastChild,this.box.firstChild);
this.init_element_children();
this.pause_act();
}
}
js_rolling.prototype.move_right = function(){
if(this.direction!=2&&this.direction!=4){return false;}
this.box.insertBefore(this.box.lastChild,this.box.firstChild);
this.init_element_children();
this.pause_act();
}
js_rolling.prototype.start = function(){ //·Ñ¸µ ½ÃÀÛ
var thisC = this;
this.stop();
this.is_rolling = true;
var act = function(){
if(thisC.is_rolling){
if(thisC.direction==1){thisC.act_move_up();}
else if(thisC.direction==2){thisC.act_move_right();}
else if(thisC.direction==3){thisC.act_move_down();}
else if(thisC.direction==4){thisC.act_move_left();}
}
}
this.time_timer = setInterval(act,this.time_dealy);
}
js_rolling.prototype.pause_act = function(){ //ÀϽà µ¿ÀÛ
if(this.time_dealy_pause){
var thisC = this;
var act = function(){thisC.resume();thisC.time_timer_pause=null;}
if(this.time_timer_pause){clearTimeout(this.time_timer_pause);}
this.time_timer_pause = setTimeout(act,this.time_dealy_pause);
this.pause();
}
}
js_rolling.prototype.pause = function(){ //ÀϽà ¸ØÃã
this.is_rolling = false;
}
js_rolling.prototype.resume = function(){ //ÀϽà ¸ØÃã ÇØÁ¦
if(!this.mouseover){
this.is_rolling = true;
}
}
js_rolling.prototype.stop = function(){ //·Ñ¸µÀ» ³¡³¿
this.is_rolling = false;
if(!this.time_timer){
clearInterval(this.time_timer);
}
this.time_timer = null
}
$(function() {
// ÀÚ¹®°Ô½ÃÆÇ
$(".banner_roll .list_wrap").slick({
dots:true,
infinite:true,
fade:true,
autoplay:true,
nextArrow:".banner_roll .btn_next",
prevArrow:".banner_roll .btn_prev",
cssEase:'linear',
});
});