<style type="text/css">
.RollDiv{margin:0 auto; width:260px; height:100%;border:1px solid red;overflow:hidden;}  
.RollDiv > ul{overflow:hidden;height:100%;width:260px list-style:none; margin:0; padding:0; }
.RollDiv > ul > li{ float:left; display:block;}  
.RollDiv > ul > li > img{ width:260px; height:auto;margin-bottom:20px;}
</style>
 
<div class="slide_wrap">
  <div class="RollDiv">  
    <ul>  
      <li href=""><img src="http://placehold.it/260x80" /></li>  
      <li href=""><img src="http://placehold.it/260x120" /></li>  
      <li href=""><img src="http://placehold.it/260x60" /></li>  
      <li href=""><img src="http://placehold.it/260x70" /></li>  
      <li href=""><img src="http://placehold.it/260x60" /></li>  
      <li href=""><img src="http://placehold.it/260x60" /></li>  
      <li href=""><img src="http://placehold.it/260x60" /></li>  
    </ul>  
  </div>   
</div>
 
<script>
// moveType (0:left / 1:right) 
var moveType = 1; 
// 이동시간간격 3초 
var moveSpeed = 3000; 
// 움직이는 작업중 다시 명령 받지 않음 
var moveWork = false; 
// 일시정지 flag 
var movePause = false; 
function imgMove(){ 
    if(moveWork==false){ 
       // 0d\일경우 left방향 
      if(moveType==0){ 
         // 맨처음 이미지의 폭 
         var aWidth = $(".RollDiv > ul > li:first").width(); 
         // 롤링마지막에 맨처음의 a태그 추가 
         $(".RollDiv > ul").append("<li href=\""+$(".RollDiv > ul > li:first").attr("href")+"\">" + $(".RollDiv > ul > li:first").html()+ "</li>"); 
         // 맨처음이미지를 왼쪽으로 이동시킨다. 
         $(".RollDiv > ul > li:first").animate({marginLeft:-aWidth},{duration:moveSpeed,step:function(){ 
         // 이동중 만약 일시정지 flag가 true라면 
         if(movePause==true){ 
            // 이동을 멈춘다 
            $(this).stop(); 
         } 
         },complete:function(){ 
         // 이동을 마친후 첫번째 a태그를 지워버린다 
         $(this).remove(); 
         // 이미지 움직이는것을 다시 실행 
         imgMove(); 
      }}); 
      }else{ 
      // 마지막 a태그의 폭 
       var aWidth = $(".RollDiv > ul > li:last").width(); 
       // a태그 앞에 마지막의 a태그를 생성한다 단 스타일은 마지막 a태그의 폭만큼 빼준다 
       $("<li href=\"" + $(".RollDiv > ul > li:last").attr("href")+ "\" style=\"margin-left:-" + aWidth + "px\">" + $(".RollDiv > ul > li:last").html()+ "</li>").insertBefore(".RollDiv > ul > li:first") 
       // 맨처음 a태그의 margin-left를 다시 0으로 맞춰준다. 
      $(".RollDiv > ul > li:first").animate({marginLeft:0},{duration:moveSpeed,step:function(){ 
       // 이동중 만약 일시정지 flag가 true라면 
       if(movePause==true){ 
          // 이동을 멈춘다 
          $(this).stop(); 
       } 
       },complete:function(){ 
       // 이동을 마친후 마지막 a태그를 지워버린다 
       $(".RollDiv > ul > li:last").remove(); 
       // 이미지 움직이는것을 다시 실행 
       imgMove(); 
    }}); 
 } 
 } 
 } 
 function goMove(){ 
    // 일시정지가 풀려있을 경우를 대비하여 일시정지를 풀러준다 
    movePause=false; 
    // 0d\일경우 left방향 
    if(moveType==0){ 
       imgMove(); 
       }else{ 
       $(".RollDiv > ul > li:first").animate({marginLeft:0},{duration:moveSpeed,step:function(){ 
       // 이동중 만약 일시정지 flag가 true라면 
       if(movePause==true){ 
          // 이동을 멈춘다 
          $(this).stop(); 
      } 
       },complete:function(){ 
      // 이동을 마친후 마지막 a태그를 지워버린다 
      //$(".RollDiv > div > a:last").remove(); 
      // 이미지 움직이는것을 다시 실행 
      imgMove(); 
   }}); 
}
   
}
imgMove();
$('.slide_wrap').mouseover(function(){
  movePause=true;
});
$('.slide_wrap').mouseleave(function(){
  goMove();
});
</script>