jquery에서 사용할 수 있는 slidesjs라는 좋은 툴이 있지만, 퍼블리셔가 작업해서준 HTML 구조와 CSS 변경 작업이 어려워서 직접 만들었습니다.
slidesjs 보다 별로이니 되도록이면 slidesjs 를 쓰도록 하자!
그래도 나름 비슷하게 만든다고 만들었음, 아래 미리 보기로 구현된 모습을 확인 할 수 있습니다.
Javascript Example: jquery를 이용한 슬라이드배너

• 자바스크립트 부분

  var slides_auto_time = 5000; //자동으로 다음이미지를 불러올시간
  var slides_ani_time = 500; // 애니메이션 초
    
  var slides;
  var slides_pagination;
  var slides_total = 0;
  var slides_idx = 0;
  var slides_time = null;
  var slides_click_page = -1;
  var slides_move_img = -1;
  var slides_button_lock = 0;
    
  $(document).ready(function () {
      slides_main();
  });
    
  function slides_main() {
      slides = $("#slides .main_img .content"); //슬라이드 컨텐츠 영역
      slides_pagination = $("#slides .btn_area p"); // 슬라이드 페이지 영역
    
      slides_total = slides.find("a").length;
    
      var btn_page_html = "";
      for(i=0;i<slides_total;i++) {
          btn_page_html += "<a href=\"javascript:slides_move_page('"+i+"');\" idx='"+i+"'><img src='./images/jquery_slides/btn_off.png' alt='"+(i+1)+"' /></a>\n";
      }
    
      slides_pagination.html(btn_page_html);
    
      slides_pagination.find("a img").eq(0).attr("src", "./images/jquery_slides/btn_on.png");
    
      slides_time = setTimeout("slides_prev()", slides_auto_time);
  }
    
  function slides_page_next() {
      if(slides_click_page == -1) {
          slides_idx--;
    
          if(slides_idx < 0) {
              slides_idx = slides_total-1;
          }
      } else {
          slides_idx = slides_click_page;
          slides_click_page = -1;
      }
      slides_pagination.find("a img").attr("src", "./images/jquery_slides/btn_off.png");
      slides_pagination.find("a img").eq(slides_idx).attr("src", "./images/jquery_slides/btn_on.png");
  }
    
  function slides_page_prev() {
      if(slides_click_page == -1) {
          slides_idx++;
    
          if(slides_idx >= slides_total) {
              slides_idx = 0;
          }
      } else {
          slides_idx = slides_click_page;
          slides_click_page = -1;
      }
      slides_pagination.find("a img").attr("src", "./images/jquery_slides/btn_off.png");
      slides_pagination.find("a img").eq(slides_idx).attr("src", "./images/jquery_slides/btn_on.png");
  }
    
  function slides_next() {
      if(slides_button_lock) return ;
      slides_button_lock = 1;
    
      if(slides_time != null) {
          clearTimeout(slides_time);
          slides_time = null;
      }
    
      slides.find("a").last().css({"margin-left":"-546px"});
      var tmp = slides.find("a").last();
      slides.prepend(tmp);
    
      slides.find("a").eq(0).animate({ marginLeft: "+=546" }, slides_ani_time, function () {
          slides.find("a").css("margin-left","0");
          slides_page_next();
    
          if(slides_move_img > -1) sortSlides();
    
          slides_button_lock = 0;
    
          slides_time = setTimeout("slides_prev()", slides_auto_time);
      });
  }
    
  function slides_prev() {
      if(slides_button_lock) return ;
      slides_button_lock = 1;
    
      if(slides_time != null) {
          clearTimeout(slides_time);
          slides_time = null;
      }
    
      slides.find("a").eq(0).animate({ marginLeft: "-=546" }, slides_ani_time, function () {
          var tmp = slides.find("a").first();
          slides.append(tmp);
          slides.find("a").css("margin-left","0");
          slides_page_prev();
    
          if(slides_move_img > -1) sortSlides();
    
          slides_button_lock = 0;
    
          slides_time = setTimeout("slides_prev()", slides_auto_time);
      });
  }
    
  function slides_move_page(idx) {
      var tmp;
      slides.find("a").each(function () {
          if(idx == $(this).attr("idx")) {
              tmp = $(this);
          }
      });
    
      slides_click_page = idx;
      slides_move_img = idx;
    
      if(slides_idx > idx && idx > -1) {
          slides.append(tmp);
          slides_next();
      } else if(slides_idx < idx && idx < slides_total) {
          slides.find("a").eq(0).after(tmp)
          slides_prev();
      } else {
          slides_click_page = -1;
          slides_move_img = -1;
      }
  }
    
  function sortSlides() {
      var tmp = new Array();
    
      slides_move_img = slides.find("a").eq(0).attr("idx");
    
      slides.find("a").each(function () {
          var idx = $(this).attr("idx");
          tmp[idx] = $(this);
      });
    
      var i = 0;
      while(i < slides_total) {
          slides.append(tmp[slides_move_img]);
    
          slides_move_img++;
          if(slides_move_img >= slides_total) {
              slides_move_img = 0;
          }
    
          i++;
      }
    
      slides_move_img = -1;
  }
  

• HTML + CSS 부분

  <style>
  body { margin:0; padding:0; }
    
  .contentwrap1 {width:1200px;height:251px;background:url(./images/jquery_slides/bg_main_top.png) no-repeat;padding:16px 0 0 0;position:relative;z-index:9;}
  .main_visual {width:638px;height:250px;margin:0px 0 0 135px;position:relative;}
  .main_img {width:546px;height:250px;margin-left:45px;}
  .main_img ul {width:546px;height:250px;overflow:hidden;float:left;}
  .main_img ul li {float:left;}
    
  p.btn_pre {position:absolute;top:100px;left:0;}
  p.btn_next {position:absolute;top:100px;right:0;}
  .btn_area {position:absolute;bottom:0px;width:1200px;height:39px;background:url(./images/jquery_slides/bg_btnArea01.png) repeat-x;z-index:2;}
  .btn_area p {width:546px;margin-left:180px;text-align:center;}
  .btn_area p span {margin-right:2px;}
    
  #slides .main_img a { float:left; }
  #slides .main_img { overflow:hidden; }
  #slides .main_img .content { width:1092px; }
  #slides .main_img .content img { width:546px; height:250px; }
  </style>
    
  <div class="contentwrap1" id="slides">
      <div class="main_visual">
          <p class="btn_pre"><a href="javascript:slides_prev();"><img src="./images/jquery_slides/btn_pre.png" alt=""/></a></p>
          <div class="main_img">
              <div class="content">
                  <a href="http://www.naver.com" idx="0"><img src="./images/jquery_slides/banner_13754311080.png" alt="배너1" title="배너1" /></a>
                  <a href="http://www.daum.net" idx="1"><img src="./images/jquery_slides/banner_13754328710.png" alt="배너2" title="배너2" /></a>
                  <a href="http://www.naver.com" idx="2"><img src="./images/jquery_slides/banner_13758631920.png" alt="배너3" title="배너3" /></a>
                  <a href="http://jon.rcsoft.co.kr/html/index_new.html" idx="3"><img src="./images/jquery_slides/banner_13759283560.png" alt="배너4" title="배너4" /></a>
                  <a href="http://www.google.co.kr" idx="4"><img src="./images/jquery_slides/banner_13759284440.jpg" alt="배너5" title="배너5" /></a>
              </div>
          </div>
          <p class="btn_next"><a href="javascript:slides_next();"><img src="./images/jquery_slides/btn_next.png" alt=""/></a></p>
      </div>
      <div class="btn_area">
          <p>
          </p>
      </div>
  </div>
  

이 저작물은 크리에이티브 커먼즈 저작자표시-비영리-동일조건변경허락 4.0 국제 라이선스에 따라 이용할 수 있습니다.