jquery를 이용한 슬라이드(slides)배너

munilive
munilive
Snippets Javascript #snippets #example #javascript #javascript function #jquery
jquery를 이용한 슬라이드(slides)배너

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 국제 라이선스 에 따라 이용할 수 있습니다.

munilive

munilive

Backend Application Developer

Share

Comments

Related Posts

JQuery : 클래스 이름만으로 페이지 전체에 롤오버 이미지 쉽게 적용하기

JQuery : 클래스 이름만으로 페이지 전체에 롤오버 이미지 쉽게 적용하기

마우스 오버 시 변경될 이미지를 쌍으로 만들어 사용할 경우 지정된 class만으로 롤오버 이미지를 자동 적용하는 스크립트에 대한 코드입니다.

munilive munilive ·
datepicker 시작일과 종료일 설정 시 사용하기 좋은 팁

datepicker 시작일과 종료일 설정 시 사용하기 좋은 팁

jQuery UI Datepicker를 이용하여 시작/종료일 설정 시 시작일은 종료일 이후 날짜를, 종료일은 시작일 이전날짜를 선택하지 못하게 하는 방법에 대한 설명 글이다.

munilive munilive ·
jquery를 이용한 레이어 가운대 띄우기 (중앙정렬, 멀티레이어, 가운데 위치 자동조절)

jquery를 이용한 레이어 가운대 띄우기 (중앙정렬, 멀티레이어, 가운데 위치 자동조절)

jQuery를 이용하여 Layer를 가운데 띄우는 예제 코드와 미리보기를 제공하는 글이다.

munilive munilive ·