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

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

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

웹 프로그래밍을 하다 보면 가끔 시작일과 종료일을 입력받는 프로그램을 제작하곤 한다. 사용자에게 날짜를 입력받아야 하는데 텍스트 박스만 떡하니 놔두면 사용자가 제대로 된 데이터를…

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

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

작업중에 얻은 소스를 변경한것. 기존에는 지정한 파일 확장자의 이미지 만을 사용했다면 변경한 것에는 이미지 파일에 상관 없이 클래스명이 일때 무조건 확장자 앞에 의 유무에…

munilive munilive ·
php number format for javascript

php number format for javascript

PHP 함수로 존재하는 함수를 함수로 구현하였습니다. 사용방법은 php와 동일합니다.

munilive munilive ·