배너존

/

슬라이드 배너2

배너의 구조

  • 4번 배너
  • 1번 배너
  • 2번 배너
보이는 영역

배너의 특징

기본 html 구조

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

기본 css 코드

.slideBanner{
	overflow: hidden;
	position: relative;
	width: 100%;
}
.slideBanner ul{
	position: absolute;
	top: 0;
	left: 0;
}
.slideBanner ul li{
	float: left;
	width: 배너의넓이;
	height: 배너의높이;
}

jquery 셋팅값

var obj_wrap=$(".slideBanner"); //배너을 감싸고 있는 오브젝트의 이름, 이 오브젝트의 넓이가 배너의 넓이가 됨.
var obj_name = $(".slideBanner ul"); //움직일 오브젝트의 이름(position:absolute;인 요소)
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 소스보기