css, jquery 좌우 슬라이드 배너 (화살표클릭)

자동으로 움직이는거 아니고 양옆에 화살표 눌렀을때 이동하는것.
썩 마음에들지는 않는다.





HTML

<div class="page_banner">
<div class=" banner_btn banner_btn1" id="prevbtn" onClick="prev()"><img src="./img/main/banner_arrow_l.png"></div>
<div class="mask" id="mask">
<div id="content">
<div class="f_left">
<dl>
     <dt>
      <dd class="f_left banner_cont">취향저격</dd>
      <dd class="f_left banner_cont">자기소개서</dd>
      <dd class="f_left banner_cont">이직하는법</dd>
      <dd class="f_left banner_cont">취향저격</dd>
      <dd class="f_left banner_cont">자기소개서</dd>
      <dd class="f_left banner_cont">이직하는법</dd>
      <dd class="f_left banner_cont">취향저격</dd>
      <dd class="f_left banner_cont">자기소개서</dd>
      <dd class="f_left banner_cont">이직하는법</dd>
      <dd class="f_left banner_cont">취향저격</dd>
      <dd class="f_left banner_cont">자기소개서</dd>
      <dd class="f_left banner_cont">이직하는법</dd>
      <dd class="f_left banner_cont">취향저격</dd>
      <dd class="f_left banner_cont">자기소개서</dd>
      <dd class="f_left banner_cont">이직하는법</dd>
      <dd class="f_left banner_cont">취향저격 취향저격</dd>
      <dd class="f_left banner_cont">자기소개서</dd>
      <dd class="f_left banner_cont">이직하는법</dd>
      <dd class="f_left banner_cont">취향저격</dd>
      <dd class="f_left banner_cont">자기소개서 자기소개서</dd>
      <dd class="f_left banner_cont">이직하는법 이직하는법</dd>
      <dd class="f_left banner_cont">자기소개서 자기소개서</dd>
      <dd class="f_left banner_cont">이직하는법 이직하는법</dd>
      <dd class="f_left banner_cont">자기소개서 자기소개서</dd>
      <dd class="f_left banner_cont">이직하는법 이직하는법</dd>
      <dd class="f_left banner_cont">자기소개서 자기소개서</dd>
      <dd class="f_left banner_cont">이직하는법 이직하는법</dd>
      <dd class="f_left banner_cont">자기소개서 자기소개서</dd>
      <dd class="f_left banner_cont">이직하는법 이직하는법</dd>
      <dd class="f_left banner_cont">자기소개서 자기소개서</dd>
      <dd class="f_left banner_cont">이직하는법 이직하는법</dd>
     </dt>
    </dl>
</div>
</div>
</div>
<div class=" banner_btn banner_btn2" id="nextbtn" onClick="next()"><img src="./img/main/banner_arrow_r.png"></div>
</div>





CSS

.page_banner{
width:1280px;
margin:0 auto;
height:65px;
margin-bottom: 25px;
background-color: #e6e6e6;
overflow: hidden;
position: relative;
}
.mask{
width:1400px;
}
.banner_cont{
height: 45px;
border:1px solid #d7d7d7;
color: #383838;
font-size: 20px;
padding:10px 14px;
background-color: #ebebeb;
display: table-cell;
vertical-align: middle;
    margin-right: 10px;
    margin-bottom: 10px;

}
.banner_btn{
position: absolute;
}
.banner_btn1{
left: 0;
}
.banner_btn2{
right: 0;
}
dl{
height: 65px;
    padding: 10px 0;
    padding-left: 53px;
}





SCRIPT

var divWidth  = "100"; //배너 1개 가로크기
//이전
function prev()
{
$("#content").stop(true,true);
var moveX   = parseInt($("#content").css("margin-left"));
if( moveX < 0 )
{
$("#content").animate({"margin-left":"+=" + divWidth + "px"},500);
}
else
{
return;
}
}
//다음
function next()
{
$("#content").stop(true,true);
var hiddenWidth  = ($("#content dd").length-1)*(-divWidth);
var moveX   = parseInt($("#content").css("margin-left")) ;
console.log(moveX);
var lastWidth  = ( moveX - divWidth );

if( hiddenWidth < moveX )
{
$("#content").animate({"margin-left":"-=" + divWidth + "px"},500);
}
else
{
return;
}
}