배너존

/

슬라이드 배너1

배너의 구조

  • 4번 배너 복사본
  • 1번 배너
  • 2번 배너
  • 3번 배너
  • 4번 배너
  • 1번 배너 복사본

배너의 특징

기본 html 구조

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

기본 css 코드

.slideBanner{
    overflow: hidden;
    position: relative;
    width: 100%;
} /* 배너 li의 넓이가 됨 */
.slideBanner ul{
    position: absolute;
    top:0;
    left: 0;
}
.slideBanner ul li{
    float: left;
    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 소스보기