<style>
.RollTest { position:relative; overflow:hidden; z-index:10; min-width:990px; height:345px; background-color:#cfcfcf; }
.RollTest div.RollTestLeft { position:absolute; z-index:20; left:20px; top:50%; margin:-33px 0 0 0; width:66px; height:67px; background-image:url('./img/new/newheader.png'); background-position:-153px 0; text-indent:-9999px; }
.RollTest div.RollTestRight { position:absolute; z-index:20; right:20px; top:50%; margin:-33px 0 0 0; width:66px; height:67px; background-image:url('./img/new/newheader.png'); background-position:-153px -67px; text-indent:-9999px; }
.RollTest ul { margin:0; padding:0; position:absolute; top:27px; left:50%; }
.RollTest ul li { width:322px; height:297px; float:left; position:relative; list-style-type:none; }
</style>

<div class="RollTest">
 <div class="RollTestLeft">왼쪽</div>
 <div class="RollTestRight">오른쪽으로</div>
 <ul>
  <li><img src="./img/new/11.png" alt=""/></li>
  <li><img src="./img/new/22.png" alt=""/></li>
  <li><img src="./img/new/33.png" alt=""/></li>
  <li><img src="./img/new/55.png" alt=""/></li>
  <li><img src="./img/new/66.png" alt=""/></li>
  <li><img src="./img/new/77.png" alt=""/></li>
  <li><img src="./img/new/88.png" alt=""/></li>
  <li><img src="./img/new/99.png" alt=""/></li>
  <li><img src="./img/new/1010.png" alt=""/></li>
 </ul>
</div>

<script type="text/javascript">
var RollWidth = 322;
var RollLength = $(".RollTest > ul > li").length;
var RollSL = Number(RollLength)*RollWidth;

$(".RollTest ul").width(RollSL).css("margin-left","-"+RollSL/2+"px");
$(".RollTestLeft").click(function(){
 $("<li>"+$(".RollTest ul li").eq(RollLength-1).html()+"</li>").prependTo(".RollTest ul");
 $(".RollTest ul li:last").remove();
 $(".RollTest ul").hide().fadeIn(300);
});
$(".RollTestRight").click(function(){
 $("<li>"+$(".RollTest ul li").eq(0).html()+"</li>").appendTo(".RollTest ul:last");
 $(".RollTest ul li").eq(0).remove();
 $(".RollTest ul").hide().fadeIn(300);
});  
</script>