JavaScript

간단 배너 만들기, Simple Banner

댓글 31개

태그만 입력하면 자동으로 배너가 만들어지도록 Simple Banner을 만들었습니다.
일단 필요한 CSS 와 자바스크립트 파일을 로드합니다.

1
2
3

<link rel="stylesheet" href="simpleBanner.css">
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="simpleBanner.js"></script>

그리고 필요한 곳에 다음의 형식으로 태그만 입력하면 나머지는 Simple Banner가 알아서 처리합니다.

5
6
7
8
9
10

<div class="simple_banner_wrap">
	<ul>
		<li>......</li>
		<li>......</li>
	</ul>
</div>

Demo: http://hangunsworld.com/blogSamples/simpleBanner/

다음의 속성값을 통해서 배너의 동작을 설정할 수도 있죠.
data-type: 배너 동작 방식

  • alpha: 알파 트윈
  • hslide: 가로방향 슬라이드
  • vslide: 세로방향 슬라이드

data-nav-type: 네비게이션 타입

  • bullt: 블릿
  • numeral: 숫자
  • prev_next: 이전/다음

data-interval: 타이머 시간(밀리세컨드)

update: 2016/03/02
소스 요청이 간간이 있어 다운로드 링크 추가합니다.
Simple Banner 소스 다운로드

31 thoughts on “간단 배너 만들기, Simple Banner”

    1. 아 그러네요. IE 9에서만 확인해 봐서리…
      setTimeout이 IE에서 다르게 동작해서 발생하는 문제로, 시간 될때 수정하도록 하겠습니다.
      즐거운 하루 되세요.

      응답

      1. 잘 만드신거 응용해서 사용 중입니다.
        그런데 질문이 하나 있습니다… 만일 아래 구조 처럼 하니깐 ul의 li를 하나 빼먹고 슬라이딩 되네요..

        어디를 수정하면 천벗째 것도 나올까요? 그리고 새로고침하면 ul > li의 첫번째 것이 보여야 하는데 젤 마지막게 보입니다.

        banner 1
        banner 2
        banner 3
        banner 4
        banner 5

        banner 6
        banner 7
        banner 8
        banner 9
        banner 10

        banner 11
        banner 12
        banner 13
        banner 14

        banner 15
        banner 16
        banner 17
        banner 18
        banner 19

        응답

      2. 일단 올리신 구조로 테스트 해봐도 잘 동작하는 것 같네요.
        슬라이드를 하나 빼먹고 넘어간다면 이전, 다음 슬라이드 계산하는 부분에서 오류로 특정 슬라이드를 건너 뛰는 것이 아닌가 싶네요. 그리고 새로고침 시에 마지막 슬라이드가 보이는 것도 같은 요인으로 발생하는 것은 아닌지요?
        그게 아니면 슬라이드들이 같은 좌표상에 겹쳐진 상태에서 마지막 슬라이드가 상위에 노출될 가능성도 있습니다.
        자세한 것은 수정하신 소스를 보내주시면 한 번 디버깅해 보도록 할게요. 이메일은 hanguns@gmail.com 입니다.
        수고하세요.

        응답

  3. 좋은 자료 감사합니다
    롤링 배너 때문에 골치 아팟는데 한번에 해결 가능한 부분을 찾은 것 같습니다
    혹시 소스를 lhl4701@daum,net으로 받을 수 있을 까요?

    다시한번 감사합니다

    응답

  4. 안녕하세요.
    홈페이지 관리 때문에 슬라이드 배너 제작 방법을 찾다가 들어오게 되었네요.
    다른 슬라이드 배너들에 비해 만드신 슬라이드 배너가 제일 좋아보여서 홈페이지에 쓰고 싶은데
    혹시 simpleBanner.js 소스 파일을 받을 수 있을까요?
    메일 주소는 ytbeom@gmail.com 입니다.

    감사합니다. 좋은 하루 되세요! :D

    응답

  5. 안녕하세요! 홈페이지 둘러보다가 슬라이드 배너 맨마지막에 prev_next 배너가 맘에들어서 그러는데
    메일로 좀 받아볼수있을까요?ㅠㅠ
    메일주소는 whitecast24@naver.com 입니다
    좋은하루 보내세요!

    응답

  6. 안녕하세요!! 홈페이지 제작 연습중 제일 상단의 배너가 너무 마음에 드네요 ㅠㅠ
    죄송하지만 소스를 받아볼 수 있을까요? :D
    초보인 저에게 많은 도움이 될 것 같습니다 ^^
    dusgmlsms4@naver.com여기로 가능하시다면 부탁드리겠습니다. 감사합니다!!

    응답

  7. 안녕하세요. 배너 관련으로 검색하다가 찾게 되었는데 너무 좋네요 ^^
    근데 궁금한 점이 있네요~ ^^;; 현재 안드로이드 WebView 에서 이 배너를 활용 중인데 네비게이터 크기를 키워 클릭 형식으로 배너 화면을 전환하고 있습니다. 이를 슬라이드 형식으로 터치를 하면 화면을 전환하게끔 하고 싶어 스크립트 파일에 전환하는 함수를 추가 싶은데 어느 변수의 값을 강제로 고쳐야 할까요?? 네비게이터에 원이 생기는 배너를 사용하고 있습니다~
    힌트 좀 주시면 감사하겠습니다~~~

    응답

    1. 안녕하세요. 다른 글에 달린 댓글이 많아서 미쳐 글 남기신거를 못봤네요.
      이 배너는 이름대로 최소한의 기능으로 간단하게 만든거라서 기능이 미미합니다.
      터치로 좌우 슬라이드 하는 기능을 추가하려면, 아무래도 스크립트가 많이 추가되어야 할것 같아요.
      그래서 이 경우에는 다른 슬라이드 소스를 활용하시는게 나을듯 합니다.
      참고할 만한 링크 남겨요.
      Flick Navigation – http://dohoons.com/test/flick/
      Swiper – http://idangero.us/swiper/

      응답

  11. 안녕하세요 소스 쓰고있는도중 물어볼것이 있어 이렇게 글남깁니다.
    prev_next를 응용하려고하는데 처음에 이버튼이 지정이되어있는데 이부분을
    이미지로 바꾸고 싶은데 어떡하면 좋을까요 ??

    응답

    1. CSS를 보면 .simple_banner_wrap .nav_wrap.prev_next ul li 가 있는데, 여기에 백그라운드 이미지를 적용하거나,
      HTML의 li 태그에 이미지를 직접 넣어도 될 듯 합니다.

      응답

답글 남기기

이메일 주소는 공개되지 않습니다. 필수 항목은 *(으)로 표시합니다