좌우로 이동하는 일반 배너

배너의 구조

배너의 특징

• 좌우로 이동하는 배너이다. 마지막 배너가 보이면 더이상 다음 버튼이 안눌리고, 1번 배너가 보이면 더이상 이전버튼이 안눌림
• li에는 절대 넓이 이외의 값이 들어가면 안됨. (padding, margin, border 금지)
  만약 여백이나 border가 필요하면 li안에 감싸고 있는 요소에 준다.
• li의 넓이값만큼 이동함.
• ul의 넓이는 jquery에서 li의 갯수를 계산해서 li가 두줄로 되지 않도록 (좌우로 배치되도록) width값을 주고 있다.

기본 html 구조

기본 css 코드

.banner{position: relative;}
.banner ul{
    position: aboslute;
    top: 0;
    left: 0;
}
.banner li{
    float: left;
    width: 배너의넓이;
    height: 배너의높이;
}

jquery소스