세로로 흐르는 슬라이드로 변경 채택완료

.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;}



 



    

      

        

        

        

        

        

        

        

      

     



 



// 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("" + $(".RollDiv > ul > li:first").html()+ ""); 

         // 맨처음이미지를 왼쪽으로 이동시킨다. 

         $(".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태그의 폭만큼 빼준다 

       $("" + $(".RollDiv > ul > li:last").html()+ "").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();

});