배너의 구조
- 1번 배너
- 2번 배너
- 3번 배너
- 4번 배너
- 5번 배너
- 6번 배너
- 7번 배너
- 8번 배너
- 9번 배너
- 10번 배너
보이는 영역
배너의 특징
- 배너가 끝으로가면 첫배너가 뒤따라 오는 무한반복 배너이다. 첫번재 배너과 마지막 배너을 복제하여 배치하는 것이 특징이기때문에 각각의 배너 li를 선택해야 할 경우 nth-child로 선택하면 안되고 반드시 class명을 별도로 줘야 한다.
- li에는 절대 여백 및 border를 주면 안됨(padding, margin, border 금지) 만약 여백이나 border가 필요하면 li안에 감싸고 있는 요소에 준다.
- ul의 넓이는 jquery에서 li의 갯수를 계산해서 li가 두줄로 되지 않도록 (좌우로 배치되도록) width값을 주고 있다.
- pc와 mobile에서 보여질 배너의 갯수를 설정할 수 있다.(단 모바일에서 1개 이상일 경우라도 터치해서 드래그하면 1개씩만 옆으로 이동함, 왠만하면 모바일은 1개가 좋음)
- 감싸고 있는 영역의 넓이에 맞게 배너이 리사이즈되고, 높이도 자동으로 줄어든다. (li의 높이값을 감싸는 영역에 한번 더 지정하는 방식)
- 배너는 하나씩이동
기본 html 구조
<div class="banner">
/* obj_wrap */
<ul>
/* obj_name 배너 전체를 묶어주는 요소로 이 요소가 jquery에서 움직임(반드시 position: absolute;, left: 0; 이어야함) */
<li></li>
/* obj_child 배너항목(반드시 float: left;를 줘서 모든 배너이 옆으로 나란히 배치되도록 해야함.) */
</ul>
</div>
기본 css 코드
.banner{
overflow: hidden;
position: relative;
}
.banner ul{
position: absolute;
top: 0;
left: 0;
}
.banner ul li{float:left;} /* li와 넓이는 jquery에서 계산. li의 높이값을 jquery에서 banner의 높이로 재 지정함 */
jquery소스
jquery 소스보기