배너존

/

fade-in/out 배너

배너의 구조

  • 1번 배너
  • 2번 배너
  • 3번 배너
  • 4번 배너

배너의 특징

기본 html 구조

<div class="slideBanner"> /* obj_wrap 배너이 나오는 영역
	<ul> /* obj_name 배너 전체를 묶어주는 요소
		<li></li> /* obj_child 배너항목(반드시 float:left;를 줘서 모든 배너이 옆으로 나란히 배치되도록 해야함.) */
	</ul>
</div>

기본 css 코드

.slideBanner{}
.slideBanner ul{position: relative;}
.slideBanner ul li{
	display: none;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 10;
}
.slideBanner ul li.active{
	display: block;
	z-index: 11;
}

jquery 셋팅값

var obj_wrap=$(".slideBanner"); //배너을 감싸고 있는 오브젝트의 이름, 이 오브젝트의 넓이가 배너의 넓이가 됨.
var obj_name = $(".slideBanner ul"); //배너 전체를 묶어주는 요소
var obj_child = $(".slideBanner ul li"); //보여질 실제 배너을 감싸고 있는 영역

//배너 컨트롤버튼
var ctrl_btn = true; //사용여부 (true, false)
var ctrl_next = $(".slideBanner .next"); //배너 다음 버튼 (값을 안준다면 그냥 비워두세요. 지우지 마세요!!)
var ctrl_prev = $(".slideBanner .prev"); //배너 이전 버튼
var ctrl_stop = $(".slideBanner .stop"); //배너 정지 버튼
var ctrl_play = $(".slideBanner .play"); //배너 재생 버튼

//현재배너 번호 / 전체 배너번호
var numbering = true; //사용여부 (true, false)
var curr_num = $(".slideBanner .curr_num");
var total_num = $(".slideBanner .total_num");

//배너 리스트
var paging = true; //사용여부 (true, false)
var paging_obj = $(".slideBanner .paging button"); //몇개의 배너이 있는 표시하는 동그라미
var paging_curr_class = "active"; //현재 선택된 배너을 표시할 class명

jquery소스

jquery 소스보기