태그 보관물: Banner

간단 배너 만들기, Simple Banner

태그만 입력하면 자동으로 배너가 만들어지도록 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 소스 다운로드