// 객체를 저장하기 위한 배열, 객체를 무한으로 만들지 않고 효과적으로 관리하기 위해 사용 // 객체이름은 div 접두어가 된다. // 버튼을 눌렀을때 해당 div접두어 이름이 없으면 슬라이딩 객체를 추가해주고 // 동일한 이름이 있으면 객체를 배열에서 삭제-->슬라이딩 멈춤--> 객체를 메모리에서 삭제 // var arrSliderClass = new Array(); // 동일한 이름의 객체가 있는지 체크 function check_object(slider_object_name) { var return_value = false; var i; for (i=0; i left 에 값을 바꿈으로써 움직이는 효과를 준다. // 전달인자는 객체 // function slider_scroll(slider_object) { var prefix_name =slider_object.DIV_PREFIX; var direction = parseInt(slider_object.DIRECTION); var stop_time = slider_object.STOP_TIME; var speed_time = slider_object.SPEED_TIME; var unit_width = parseInt(slider_object.UNIT_WIDTH); var unit_count = slider_object.UNIT_COUNT; var auto_scroll = slider_object.AUTO_SCROLL; var isStop = false; // true: 슬라이딩을 stop_time 시간 동안 멈춤, false: speed_time 간격으로 계속 left 값을 direction 만큼 이동시킴 for(var i=1;i<=unit_count;i++) // 슬라이딩 개체수 { var temp=document.getElementById(prefix_name+i); var max = unit_width*unit_count; // 개체들의 길이 총합 var middle_calculation = (max+parseInt(temp.offsetLeft)+direction+unit_width) % max; temp.style.left= parseInt(middle_calculation-unit_width); // 실제 여기서 정해지는 left 값만큼 개체가 이동한다. if(auto_scroll) // 슬라이딩기능시 사용 { if( middle_calculation%unit_width == 0) // 하나의 개체가 이동후 stop_time 시간동안 멈춤 { isStop = true; } try { if(direction < 0 && parseInt(temp.style.left) == 0) // - 부호일때 개체들의 맨 처음이면 stop_time 시간동안 멈춤 { isStop = true; } else if(direction > 0 && parseInt(temp.style.left) + parseInt(temp.firstChild.firstChild.width) == parseInt(temp.parentNode.style.width)) // + 부호일때 개체들의 맨 마지막이면 stop_time 시간동안 멈춤 { isStop = true; } } catch(e) {} //temp.onmouseover = function(){ stop_slider_scroll(slider_object); } // 개체에 마우스가 올라갈때 사용 //temp.onmouseout = function(){ slider_scroll(slider_object); } // 개체에 마우스 포인트가 떠날때 사용 } } if(auto_scroll) // 슬라이딩기능시 사용 { if(isStop) // true: 슬라이딩을 stop_time 시간 동안 멈춤 { slider_object.STOP=setTimeout(function(){ slider_scroll(slider_object); }, stop_time); } else // false: speed_time 간격으로 계속 left 값을 direction 만큼 이동시킴 { slider_object.STOP=setTimeout(function(){ slider_scroll(slider_object); }, speed_time); } } } // 슬라이딩기능을 멈춤, 인자는 객체 // function stop_slider_scroll(slider_object) { clearTimeout(slider_object.STOP); } // ◀,▶ 버튼클릭시 다음 함수호출 // prefix_name : div 접두어, 객체이름으로 활용함, 예: div_hot_focus_ // direction : 방향을 결정, 예: +1, -1 // speed_time 과 함께 슬라이딩 속도를 결정하는 쓰임, 실제로 speed_time을 10 으로 하고 이것으로 조정 // unit_width 의 인수값을 넣으면 됨, 예: unit_width(162), direction(1,2,3,6,..,18,27..) // stop_time : 잠시 정지해 있는 시간(자동슬라이딩시에 사용), 예: 2000 (2초동안) // speed_time : direction 에서 정한 px단위를 speed_time 마다 호출, 예: 10 (0.01초) // 슬라이딩 간격을 결정할때 쓰이나 10 이하 더 빨라지지 않음, direction 으로 조정한다. // unit_width : 슬라이딩되는 폭, 움직이는 단위 // unit_count : 슬라이딩 되는 개체수 // auto_scroll : 슬라이딩기능(true), 롤링기능(false) 여부 // // 사용방법: // // // ①

-----> 필수 // // // // // //

// ②

-----> 필수 // // //

//

//

//

-----> 필수 // // //

//

//

//

// function MainSlideController(prefix_name,direction,stop_time,speed_time,unit_width,unit_count,auto_scroll) { var mark = String(direction).substring(0,1); // 부호를 가져옴(+,-) for(var i=1;i<=unit_count;i++) // ②

에 속성값을 지정 { var divobj = document.getElementById(prefix_name+i); if(!divobj.style.cssText) divobj.style.cssText = "position:absolute;top:0;left:"+unit_width*(i-1)+";"; } if(!auto_scroll) // 슬라이딩 여부, false 이면 움직이는 픽셀단위를 전체로.. { direction = mark+unit_width; } direction = Number(direction); // 다시 숫자로 변환 var old_slider_object = check_object(prefix_name); // 이전 객체를 체크 객체를 삭제처리 if(old_slider_object!=false) { stop_slider_scroll(old_slider_object); // 슬라이딩 멈춤 old_slider_object = null; // 객체삭제 } // ◀,▶ 버튼을 누를때 마다 객체를 생성하지만 이미 객체가 있다면 삭제하고 다시 생성 var new_slider_object = new SliderClass(prefix_name,direction,stop_time,speed_time,unit_width,unit_count,auto_scroll); // 객체생성 slider_scroll(new_slider_object); // 슬라이딩기능시작 arr_write_object(new_slider_object); // 객체를 배열(전역변수)에 저장 } // 페이지가 열리자마자 슬라이드 기능을 넣고 싶을때 사용 //

태그 안에 "autostart" 속성값이 있으면 MainSlideController() 함수 호출 // 예)

// 사용하지 않으려면 태그안에서 "autostart" 를 빼면됨 // function initMainSlideController() { var div_tags= document.getElementsByTagName("div"); for(var i= 0; i < div_tags.length; i++) { var divobj = div_tags[i]; var autostart = divobj.getAttribute("autostart"); if(autostart) { var arr = autostart.split(","); // 문자열을 배열에 저장 "div_hot_focus_,+18,2000,10,162,3,true" setTimeout(function(){ MainSlideController(arr[0],arr[1],arr[2],arr[3],arr[4],arr[5],arr[6]); }, 3000); // 3 초후에 함수실행 } } } // onload 기능: initMainSlideController() 함수호출 // if(window.addEventListener) window.addEventListener("load", initMainSlideController, false); else if(window.attachEvent) window.attachEvent("onload", initMainSlideController);