인자별 함수 실행 part2

클래스아 아는게 없다보니 뭘 어떻게 해야할지도 모르겠네요...

코드도 점점 지저분해지는데,, 도와주실분 없으신가요 ㅠㅠ?

 

목적은 하나의 함수로 롤링하고자하는 배너별 다른 인자값으로 여러번 실행시켜

여러개의 롤링배너가 실행되게 하는 것입니다.

 

<style type="text/css">
 img { border:0; }
</style>
<script src="./jquery-1.7.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
//var  rollBannerFunc = function(bannerWrapId,btnType,timer){
 /* banner roll */
 var bannerImgId = '';
 var bannerMnId = '';
 var bannerImgCnt = '';
 var bannerMnCnt = '';
 var timer = ''; // interval time
 var auto_refresh = ''; // timer auto refresh
 var changeImgNumber = ''; // auto play number
 // init banner
 function bannerInit(bannerWrapId,btnType,timer){
  /*
   - naming rules
   banner wrapper : 'banner' + numbers
   image banner list : 'banner' + numbers + 'Img'
   banner control button : 'banner' + numbers + 'Mn'
   - parameter
   bannerWrapId : banner wrap id
   btnType : button type(1 : prev, next; 2 : menu list on/off)
   timer : auto rolling play interval
  */
  
  
  
  this.bannerbannerWrapId = bannerWrapId;
  this.btnType = btnType;
  this.timer = timer;

  bannerImgId = '#' + bannerWrapId + 'Img';
  bannerMnId = '#' + bannerWrapId + 'Mn';
  bannerImgCnt = $(bannerImgId).children().length;
  bannerMnCnt = $(bannerMnId).children().length;

  /* img rolling */
  // first banner & menu init
  if(btnType == 1) {
   $(bannerImgId + ' li').hide().eq(0).show();
  } else if(btnType == 2){ // prev, next click type이 아닌 경우 menu init
   initMnSrc = $(bannerMnId + ' li').eq(0).find('img').attr('src'); // 교체할 메뉴 이미지명
   initMnOn_name = initMnSrc.split('_off.')[0];
   initMnOn_type = initMnSrc.split('_off.')[1];
   $(bannerMnId + ' li').eq(0).find('img').attr('src', initMnOn_name + '_on.' + initMnOn_type);
   $(bannerImgId + ' li').hide().eq(0).show();
  }
  /* mouse event roll banner img */
  if(btnType == 1) { // btnType : next, prev button click event
   /* auto play condition */
   if(typeof timer != 'undefined'){ // auto rolling play use
//          alert();
   } else { // auto rolling play not use
    
   }
   /* button control */
   
   // prev click
   $(bannerMnId + ' li').eq(0)
   .bind('click',function(){
    for(i = 0;i < bannerImgCnt; i++){ //현재 show를 찾음
     if($(bannerImgId + ' li').eq(i).css('display') == 'block'){
      bannerImgViewNumber = i;
     }
    }
    
    //alert('show : '+$(bannerImgId).show().index());
    bannerOn(bannerImgViewNumber, btnType, timer);
    /* auto refresh stop */
    if(typeof timer != 'undefined'){
    // auto refresh roll banner img stop
     clearInterval(auto_refresh);
     auto_refresh = null;
       }
   });
   // next click
   $(bannerMnId + ' li').eq(1)
   .bind('click', function(){
    for(i = 0;i < bannerImgCnt; i++){ //현재 show를 찾음
     if($(bannerImgId + ' li').eq(i).css('display') == 'block'){
      bannerImgViewNumber = i;
     }
    }
    bannerOff(bannerImgViewNumber, btnType, timer);
    /* auto refresh play */
    if(typeof timer != 'undefined'){
     if(auto_refresh != null) return;
     auto_refresh = setInterval(refreshAutoPlay, timer);  // auto roll replay

    }
    
   });
  } else if(btnType == 2) { // btnType : menu list on/off
   /* button control */
   $(bannerMnId + ' li')
   // mouse enter
   .bind('mouseenter',function(){
    ctrlNumber = $(this).index(); // 현재 순서
    bannerOn(ctrlNumber, btnType, timer);

    /* auto refresh stop */
    if(typeof timer != 'undefined'){
    // auto refresh roll banner img stop
     clearInterval(auto_refresh);
     auto_refresh = null;
     /* refresh menu off */
     autoPlayMnSrc = $(bannerMnId + ' li').eq(changeImgNumber-1).find('img').attr('src'); // 교체할 메뉴 이미지명
     autoPlayMnOn_name = autoPlayMnSrc.split('_on.')[0];
     autoPlayMnOn_type = autoPlayMnSrc.split('_on.')[1];
     if(autoPlayMnOn_type != undefined){ //예외 처리
      $(bannerMnId + ' li').eq(changeImgNumber-1).find('img').attr('src', autoPlayMnOn_name + '_off.' + autoPlayMnOn_type);
     }
    }
   })
   // mouse leave
   .bind('mouseleave', function(){
    ctrlNumber = $(this).index(); // 현재 순서
    bannerOff(ctrlNumber, btnType, timer);

    /* auto refresh play */
    if(typeof timer != 'undefined'){
     if(auto_refresh != null) return;
     auto_refresh = setInterval(refreshAutoPlay, timer);  // auto roll replay
     /* refresh menu on */
     autoPlayMnSrc = $(bannerMnId + ' li').eq(changeImgNumber-1).find('img').attr('src'); // 교체할 메뉴 이미지명
     autoPlayMnOn_name = autoPlayMnSrc.split('_off.')[0];
     autoPlayMnOn_type = autoPlayMnSrc.split('_off.')[1];
     if(autoPlayMnOn_type != undefined){ //예외 처리
      $(bannerMnId + ' li').eq(changeImgNumber-1).find('img').attr('src', autoPlayMnOn_name + '_on.' + autoPlayMnOn_type);
     }
    }
   });
  }
  
  /* auto refresh roll banner img */
  if(typeof timer != 'undefined'){
   var auto_refresh = null;
   changeImgNumber = 0;
   var refreshAutoPlay = function () {
    if(changeImgNumber < bannerMnCnt){
     //alert('f : '+ changeImgNumber + ' < ' + bannerMnCnt);
     bannerOff(changeImgNumber-1,btnType,timer);
     bannerOn(changeImgNumber,btnType,timer);
     //alert('before : '+ changeImgNumber);
     changeImgNumber++;
     //alert('after : '+ changeImgNumber);
    } else {
     changeImgNumber = 0;
    }
   };
   var start_refreshing = function() {
    if(auto_refresh != null) return;
    auto_refresh = setInterval(refreshAutoPlay, timer); 
   };
   start_refreshing();
  }
 } // bannerInit function end

 /* banner & menu list button control */
 function bannerOn(mnliIdxOn, btnType, timer){ // banner & menu img on

  if(btnType == 1){ //prev
   prevImgNumber = mnliIdxOn-1;
   if(prevImgNumber == -1){ // last banner number assign
    mnliIdxOn = bannerImgCnt-1;
   } else {
    mnliIdxOn = prevImgNumber;
   }
   $(bannerImgId + ' li').hide().eq(mnliIdxOn).show(); // banner change on menu mouseenter
   if(auto_refresh != null) return;
   auto_refresh = setInterval(refreshAutoPlay, timer);
  } else if(btnType == 2){ // prev, next click type이 아닌 경우

   currentMnSrc = $(bannerMnId + ' li').eq(mnliIdxOn).find('img').attr('src'); // 교체할 메뉴 이미지명
   var currentMnOn_name = currentMnSrc.split('_off.')[0];
   var currentMnOn_type = currentMnSrc.split('_off.')[1];
   if(typeof currentMnOn_type != 'undefined'){ //예외 처리(현재 show중인 menu에서 mouseenter후 mouseleave시 img 원복 안됨)
    $(bannerMnId + ' li').eq(mnliIdxOn).find('img').attr('src', currentMnOn_name + '_on.' + currentMnOn_type);
   }

   $(bannerImgId + ' li').hide().eq(mnliIdxOn).show(); // banner change on menu mouseenter
  }
 }
 function bannerOff(mnliIdxOff, btnType, timer) { // banner & menu img off
  if(btnType == 1){ //next
   nextImgNumber = mnliIdxOff+1;
   if(nextImgNumber == bannerImgCnt){ // last banner number assign
    mnliIdxOff = 0;
   } else {
    mnliIdxOff = nextImgNumber;
   }
   $(bannerImgId + ' li').hide().eq(mnliIdxOff).show(); // banner change on menu mouseenter
    if(auto_refresh != null) return;
    auto_refresh = setInterval(refreshAutoPlay, timer); 
  } else if(btnType == 2){ // prev, next click type이 아닌 경우
   currentMnSrc = $(bannerMnId + ' li').eq(mnliIdxOff).find('img').attr('src'); // 교체할 메뉴 이미지명
   var currentMnOn_name = currentMnSrc.split('_on.')[0];
   var currentMnOn_type = currentMnSrc.split('_on.')[1];
   if(currentMnOn_type != undefined){ //예외 처리(현재 show중인 menu에서 mouseenter후 mouseleave시 img 원복 안됨)
    $(bannerMnId + ' li').eq(mnliIdxOff).find('img').attr('src', currentMnOn_name + '_off.' + currentMnOn_type);
   }
  }
 }
/*
 function mainfunc (func){
  if(arguments.length == 3)
   window[func](arguments[1], arguments[2]);
  else if(arguments.length == 4)
   window[func](arguments[1], arguments[2], arguments[3]);
 }
 
mainfunc('bannerInit','banner2',1,2000);
mainfunc('bannerInit','banner3',3,2000);
mainfunc('bannerInit','banner4',2,2000);
*/
 //call banner2
 var ban01 = new bannerInit('banner2',1,2000);
 var ban02 = new bannerInit('banner3',2,1000);
 var ban03 = new bannerInit('banner4',1,3000);
 //bannerInit('banner2',1,2000);
 //bannerInit('banner3',2,1000);
 //bannerInit('banner4',1,3000);
//} //class end
/*
var banner1Func = new rollBannerFunc(bannerWrapId,btnType,timer);
baner1Func.bannerInit('bannerInit','banner2',1,2000);*/
});
</script>

<table width="1026" border="0" cellpadding="0" cellspacing="0">
 <tr>
  <td height="18">
  </td>
 </tr>
 <tr>
  <td>
   <table width="1026" border="0" cellpadding="0" cellspacing="0">
    <tr>
     <td colspan="5" height="19">  <!--중앙 왼쪽 플래시 위 부분 시작-->
     </td>
    </tr>
    <tr>
     <td>
      <table width="210" valign="top" border="0" cellpadding="0" cellspacing="0">     <!--왼쪽 카테고리 시작-->
       <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
       </tr>
      </table>
     </td>
     <td width="4"> <!---  테이블 간격 -->
     </td>
     <td>
      <table valign="top" border="0" cellpadding="0" cellspacing="0">     <!--중앙 상단 테이블 시작--->
       <tr>
        <td width="586" height="374"><img src="images/main_top_08.gif" width="584" height="374" border="0"></td>
        <!-- 메인 플래시-->
       </tr>
       <tr> 
        <td height="4"></td>
       </tr>
       <tr>
        <td height="26"><img src="images/main_top_25.gif" border="0"></td> <!-- HOT판매상품 타이틀 -->        
       </tr>
       <tr>
        <td><img src="images/main_top_39.gif" border="0"></td>
       </tr>
       <tr>
        <td><img src="images/메인07_35.jpg" border="0"></td> <!-- best 기획전 타이틀-->  
       </tr>
       <tr>
        <td height="4">
        </td>
       </tr>
       <tr>
        <td>
         <style type="text/css">
          /* ul, li init */
          #banner3 ul, #banner3 li { margin:0;padding:0; }
          /* banner3 wrap */
          #banner3 { position: relative; width: 365px; height: 144px; }
          /* init element */
          #banner3 ul, #banner3 li { position: absolute; margin: 0; padding: 0; list-style: none; }
          /* banner3 img position */
          #banner3Img { position: absolute; top: 0; left: 0; }
          /* menu position */
          #banner3Mn { position: absolute; top: 0px; left: 365px;  width: auto; height: auto;}
          #banner3Mn li { position: relative; top: 0; left: 0; margin-top:2px; }
          #banner3Mn li.first { margin-top:0; }
         </style>
         <div id="banner3">
          <ul id="banner3Img">
           <li class="m"><a href=""><img src="./images/best_tit_img_01.gif" /></a></li>
           <li><a href=""><img src="./images/best_tit_img_02.gif" /></a></li>
           <li><a href=""><img src="./images/best_tit_img_03.gif" /></a></li>
           <li><a href=""><img src="./images/best_tit_img_04.gif" /></a></li>
           <li><a href=""><img src="./images/best_tit_img_05.gif" /></a></li>
          </ul>
          <ul id="banner3Mn">
           <li class="first"><img src="./images/best_tit_btn_01_off.png" align="absmiddle" /></li>
           <li><img src="./images/best_tit_btn_02_off.png" align="absmiddle" /></li>
           <li><img src="./images/best_tit_btn_03_off.png" align="absmiddle" /></li>
           <li><img src="./images/best_tit_btn_04_off.png" align="absmiddle" /></li>
           <li><img src="./images/best_tit_btn_05_off.png" align="absmiddle" /></li>
           <!--li><img src="./images/btn_03_off.gif" /></li-->
          </ul>
         </div>
        </td> <!-- best 기획전 상품-->
               
       </tr>
      </table>   
      <!-- 중앙 상단 테이블 끝-->
     </td>
     <td width="4"> <!---  테이블 간격 -->
     </td>
     <td>
      <table border="0" cellpadding="0" cellspacing="0">    <!-- 오른쪽 배너 시작-->
       <tr>
        <td><img src="images/main_top_10.gif" width="221" height="246"></td>
       </tr>
       <tr>
        <td height="2"></td>
       </tr>
       <tr>
        <td>
         <style type="text/css">
          /* banner2 wrap */
          #banner2 { position: relative; width: 221px; height: 153px; }
          /* init element */
          #banner2 ul, #banner2 li { position: absolute; margin: 0; padding: 0; list-style: none; }
          /* banner2 img position */
          #banner2Img { position: absolute; top: 0; left: 0; }
          /* menu position */
          #banner2Mn { position: absolute; top: 5px; left: 190px;  width: auto; height: auto;}
          #banner2Mn li { position: relative; float: left; top: 0; left: 0; margin-right: 8px;}
         </style>
         <div id="banner2">
          <ul id="banner2Img">
           <li class="m"><a href=""><img src="./images/top_ban_img_01.gif" /></a></li>
           <li><a href=""><img src="./images/top_ban_img_02.gif" /></a></li>
           <li><a href=""><img src="./images/top_ban_img_03.gif" /></a></li>
          </ul>
          <ul id="banner2Mn">
           <li><img src="./images/top_ban_btn_01.png" /></li>
           <li><img src="./images/top_ban_btn_02.png" /></li>
           <!--li><img src="./images/btn_03_off.gif" /></li-->
          </ul>
         </div>
        </td>
       </tr>
       <tr>
        <td height="2"></td>
       </tr>
       <tr>
        <td><img src="images/main_top_41.gif" border="0"></td>
       </tr>
      </table>
     </td>
    </tr>
   </table>
  </td>
 </tr>
 <tr>
  <td><img src="images/tts_05.gif" width="1024" height="15" border="0"></td>
 </tr>
 <tr>
  <td>
   <table width="1026" border="0" cellpadding="0" cellspacing="0">
    <tr>
     <td>
      <table width="210" border="0" cellpadding="0" cellspacing="0">  <!--실시간 급상승 인기상품-->
       <tr>
        <td><img src="images/top_2_11.gif" border="0"></td>
       </tr>
      </table>
     </td>
     <td width="4"> <!--테이블 간격-->
     </td>
     <td width="291"><img src="images/top_2_13.gif" border="0"></td>
     <td width="4"> <!--테이블 간격-->
     </td>
     <td width="291"><img src="images/top_2_15.gif" border="0"></td>
     <td width="4"> <!--테이블 간격-->
     </td>
     <td>
      <style type="text/css">
       /* banner4 wrap */
       #banner4 { position: relative; width: 221px; height: 174px; }
       /* init element */
       #banner4 ul, #banner4 li { position: absolute; margin: 0; padding: 0; list-style: none; }
       /* banner4 img position */
       #banner4Img { position: absolute; top: 0; left: 0; }
       /* menu position */
       #banner4Mn { position: absolute; top: 7; left: 114px;  width: auto; height: auto;}
       #banner4Mn li { position: relative; float: left; top: 0; left: 0; }
      </style>
      <div id="banner4">
       <ul id="banner4Img">
        <li class="m"><a href=""><img src="./images/right_ban_mid_img_01.jpg" /></a></li>
        <li><a href=""><img src="./images/right_ban_mid_img_02.jpg" /></a></li>
        <li><a href=""><img src="./images/right_ban_mid_img_03.jpg" /></a></li>
        <li><a href=""><img src="./images/right_ban_mid_img_04.jpg" /></a></li>
        <li><a href=""><img src="./images/right_ban_mid_img_05.jpg" /></a></li>
       </ul>
       <ul id="banner4Mn">
        <li><img src="./images/right_ban_mid_btn_off_01.png" /></li>
        <li><img src="./images/right_ban_mid_btn_off_02.png" /></li>
        <li><img src="./images/right_ban_mid_btn_off_03.png" /></li>
        <li><img src="./images/right_ban_mid_btn_off_04.png" /></li>
        <li><img src="./images/right_ban_mid_btn_off_05.png" /></li>
        <!--li><img src="./images/btn_03_off.gif" /></li-->
        </ul>
      </div>
     </td>
    </tr>
   </table>
  </td>
 </tr>
 <tr>
  <td height="10"></td>
 </tr>
 <tr>
  <td> 
   <table border="0" cellpadding="0" cellspacing="0">
    <tr>
     <td>
      <style type="text/css">
       /* banner5 wrap */
       #banner5 { position: relative; width: 209px; height: 357px; }
       /* init element */
       #banner5 ul, #banner5 li { position: absolute; margin: 0; padding: 0; list-style: none; }
       /* banner5 img position */
       #banner5Img { position: absolute; top: 0; left: 0; }
       /* menu position */
       #banner5Mn { position: absolute; top: 7; left: 165px;  width: auto; height: auto;}
       #banner5Mn li { position: relative; float: left; top: 0; left: 0; margin-left: 5; }
      </style>
      <div id="banner5">
       <ul id="banner5Img">
        <li class="m"><a href=""><img src="./images/left_ban_vio_img_01.gif" /></a></li>
        <li><a href=""><img src="./images/left_ban_vio_img_02.gif" /></a></li>
        <li><a href=""><img src="./images/left_ban_vio_img_03.gif" /></a></li>
       </ul>
       <ul id="banner5Mn">
        <li><img src="./images/left_ban_vio_btn_off.png" /></li>
        <li><img src="./images/left_ban_vio_btn_off.png" /></li>
        <li><img src="./images/left_ban_vio_btn_off.png" /></li>
        <!--li><img src="./images/btn_03_off.gif" /></li-->
        </ul>
      </div>
     </td>
     <td width="4"></td>
     <td><img src="images/top_2_30.gif" border="0"></td>
     <td width="4"></td>
     <td>
      <style type="text/css">
       /* banner6 wrap */
       #banner6 { position: relative; width: 209px; height: 357px; }
       /* init element */
       #banner6 ul, #banner6 li { position: absolute; margin: 0; padding: 0; list-style: none; }
       /* banner6 img position */
       #banner6Img { position: absolute; top: 0; left: 0; }
       /* menu position */
       #banner6Mn { position: absolute; top: 7; left: 165px;  width: auto; height: auto;}
       #banner6Mn li { position: relative; float: left; top: 0; left: 0; margin-left: 5; }
      </style>
      <div id="banner6">
       <ul id="banner6Img">
        <li class="m"><a href=""><img src="./images/right_ban_gre_img_01.gif" /></a></li>
        <li><a href=""><img src="./images/right_ban_gre_img_02.gif" /></a></li>
        <li><a href=""><img src="./images/right_ban_gre_img_03.gif" /></a></li>
       </ul>
       <ul id="banner6Mn">
        <li><img src="./images/right_ban_gre_btn_off.png" /></li>
        <li><img src="./images/right_ban_gre_btn_off.png" /></li>
        <li><img src="./images/right_ban_gre_btn_off.png" /></li>
        <!--li><img src="./images/btn_03_off.gif" /></li-->
       </ul>
      </div>
     </td>
    </tr>
   </table>
  </td>
 </tr>
 <tr>
  <td height="10">
  </td>
 </tr>
 <tr>
  <td>
   <table width="1026" border="0" cellpadding="0" cellspacing="0"> <!--축구공 테이블-->
    <tr>
     <td><img src="images/main-middle_05.gif" border="0"></td>
    </tr>
   </table>
  </td>
 </tr>
 <tr>
  <td height="10">
  </td>
 </tr>
 <tr> 
  <td>
   <table width="1026" border="0" cellpadding="0" cellspacing="0">  <!-- 기본보호대 테이블시작--->
    <tr>
     <td>
      <style type="text/css">
       /* banner7 wrap */
       #banner7 { position: relative; width: 1026px; height: 246px; }
       /* init element */
       #banner7 ul, #banner7 li { position: absolute; margin: 0; padding: 0; list-style: none; }
       /* banner7 img position */
       #banner7Img { position: absolute; top: 0; left: 0; }
       /* menu position */
       #banner7Mn { position: absolute; top: -20; left: 0;  width: auto; height: auto;}
       #banner7Mn li { position: relative; float: left; top: 0; left: 0; }
      </style>
      <div id="banner7">
       <ul id="banner7Img">
        <li class="m"><a href=""><img src="./images/middle_teb_img_01.gif" /></a></li>
        <li><a href=""><img src="./images/middle_teb_img_02.gif" /></a></li>
        <li><a href=""><img src="./images/middle_teb_img_03.gif" /></a></li>
        <li><a href=""><img src="./images/middle_teb_img_04.gif" /></a></li>
        <li><a href=""><img src="./images/middle_teb_img_05.gif" /></a></li>
       </ul>
       <ul id="banner7Mn">
        <li><img src="./images/middle_teb_btn_off_01.gif" /></li>
        <li><img src="./images/middle_teb_btn_off_02.gif" /></li>
        <li><img src="./images/middle_teb_btn_off_03.gif" /></li>
        <li><img src="./images/middle_teb_btn_off_04.gif" /></li>
        <li><img src="./images/middle_teb_btn_off_05.gif" /></li>
        <!--li><img src="./images/btn_03_off.gif" /></li-->
       </ul>
      </div>
     </td>
    </tr>
   </table>
  </td>
 </tr>
 <tr>
  <td height="19">
  </td>
 </tr>
 <tr>
  <td> 
   <table width="1026" border="0" cellpadding="0" cellspacing="0"> <!--야구공 글러브 축구화 신상품 추천상품 세일상품 등등 테이블-->
    <tr>
     <td>
      <style type="text/css">
       /* banner8 wrap */
       #banner8 { position: relative; width: 1026px; height: 368px; }
       /* init element */
       #banner8 ul, #banner8 li { position: absolute; margin: 0; padding: 0; list-style: none; }
       /* banner8 img position */
       #banner8Img { position: absolute; top: 0; left: 0;}
       /* menu position */
       #banner8Mn { position: absolute; top: -30; left: 0;  width: auto; height: auto; }
       #banner8Mn li { position: relative; float: left; top: 0; left: 0; }
      </style>
      <div id="banner8">
       <ul id="banner8Img">
        <li class="m"><a href=""><img src="./images/bottom_cate_img_01.gif" /></a></li>
        <li><a href=""><img src="./images/bottom_cate_img_02.gif" /></a></li>
        <li><a href=""><img src="./images/bottom_cate_img_03.gif" /></a></li>
        <li><a href=""><img src="./images/bottom_cate_img_04.gif" /></a></li>
       </ul>
       <ul id="banner8Mn">
        <li><img src="./images/bottom_cate_btn_off_01.gif" /></li>
        <li><img src="./images/bottom_cate_btn_off_02.gif" /></li>
        <li><img src="./images/bottom_cate_btn_off_03.gif" /></li>
        <li><img src="./images/bottom_cate_btn_off_04.gif" /></li>
        <!--li><img src="./images/btn_03_off.gif" /></li-->
       </ul>
      </div>
     </td>
    </tr>
   </table>
  </td>
 </tr>
 <tr>
  <td height="19">
  </td>
 </tr>
 <tr>
  <td>  
   <table width="1026" border="0" cellpadding="0" cellspacing="0"> <!--Recommend 추천상품 테이블-->
    <tr>
     <td>
      <table height="334" border="0" cellpadding="0" cellspacing="0">
       <tr> 
        <td>
         <style type="text/css">
          /* banner9 wrap */
          #banner9 { position: relative; width: 884px; height: 334px; }
          /* init element */
          #banner9 ul, #banner9 li { position: absolute; margin: 0; padding: 0; list-style: none; }
          /* banner9 img position */
          #banner9Img { position: absolute; top: 0; left: 141;}
          /* menu position */
          #banner9Mn { position: absolute; top: 0; left: 0;  width: auto; height: auto; }
          #banner9Mn li { position: relative; top: 0; left: 0; margin-bottom: 5; }
         </style>
         <div id="banner9">
          <ul id="banner9Img">
           <li class="m"><a href=""><img src="./images/bottom_ban_left_img_01.gif" /></a></li>
           <li><a href=""><img src="./images/bottom_ban_left_img_02.gif" /></a></li>
           <li><a href=""><img src="./images/bottom_ban_left_img_03.gif" /></a></li>
           <li><a href=""><img src="./images/bottom_ban_left_img_04.gif" /></a></li>
           <li><a href=""><img src="./images/bottom_ban_left_img_05.gif" /></a></li>
           <li><a href=""><img src="./images/bottom_ban_left_img_06.gif" /></a></li>
          </ul>
          <ul id="banner9Mn">
           <li><img src="./images/bottom_ban_left_img_00.gif" /></li>
           <li height="10"></li>
           <li><img src="./images/bottom_ban_left_btn_off_01.gif" /></li>
           <li><img src="./images/bottom_ban_left_btn_off_02.gif" /></li>
           <li><img src="./images/bottom_ban_left_btn_off_03.gif" /></li>
           <li><img src="./images/bottom_ban_left_btn_off_04.gif" /></li>
           <li><img src="./images/bottom_ban_left_btn_off_05.gif" /></li>
           <li><img src="./images/bottom_ban_left_btn_off_06.gif" /></li>
           <!--li><img src="./images/btn_03_off.gif" /></li-->
          </ul>
         </div>
        </td>
       </tr>
      </table>
     </td>
     <td width="4">
     </td>
     <td>     <!--supporter brand-->

     </td>    <!--supporter brand 끝-->
    </tr>
   </table>
  </td>
 </tr>

 <tr>
  <td height="24">
  </td>
 </tr>
</table>