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

</strong></p>

<p><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></p>

<p> </p>

<p><strong><div class="slide_wrap">

  <div class="RollDiv">  

    <ul>  

      <li href=""><img src="<a href="http://placehold.it/260x80"" target="_blank" rel="noopener noreferrer">http://placehold.it/260x80"</a> /></li>  

      <li href=""><img src="<a href="http://placehold.it/260x120"" target="_blank" rel="noopener noreferrer">http://placehold.it/260x120"</a> /></li>  

      <li href=""><img src="<a href="http://placehold.it/260x60"" target="_blank" rel="noopener noreferrer">http://placehold.it/260x60"</a> /></li>  

      <li href=""><img src="<a href="http://placehold.it/260x70"" target="_blank" rel="noopener noreferrer">http://placehold.it/260x70"</a> /></li>  

      <li href=""><img src="<a href="http://placehold.it/260x60"" target="_blank" rel="noopener noreferrer">http://placehold.it/260x60"</a> /></li>  

      <li href=""><img src="<a href="http://placehold.it/260x60"" target="_blank" rel="noopener noreferrer">http://placehold.it/260x60"</a> /></li>  

      <li href=""><img src="<a href="http://placehold.it/260x60"" target="_blank" rel="noopener noreferrer">http://placehold.it/260x60"</a> /></li>  

    </ul>  

  </div>   

</div></strong></p>

<p> </p>

<p><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></p>

<p><strong>