Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                
<div class="RollDiv">  
  <div>  
    <a href=""><img src="http://placehold.it/187x60" /></a>  
    <a href=""><img src="http://placehold.it/187x60" /></a>  
    <a href=""><img src="http://placehold.it/187x60" /></a>  
    <a href=""><img src="http://placehold.it/187x60" /></a>  
    <a href=""><img src="http://placehold.it/187x60" /></a>  
    <a href=""><img src="http://placehold.it/187x60" /></a>  
    <a href=""><img src="http://placehold.it/187x60" /></a>  
  </div>  
</div>   
              
            
!

CSS

              
                .nav{margin:10px;}
.RollDiv{margin:0 auto; width:935px; height:60px;border:1px solid red;overflow:hidden;}  
.RollDiv > div{overflow:hidden;height:60px;width:1200px}
.RollDiv > div > a{ float:left; display:block;}  
.RollDiv > div > a > img{ width:180px; height:60px;margin-right:10px;}
              
            
!

JS

              
                // moveType (0:left / 1:right) 
var moveType = 0; 
// 이동시간간격 3초 
var moveSpeed = 3000; 
// 움직이는 작업중 다시 명령 받지 않음 
var moveWork = false; 
// 일시정지 flag 
var movePause = false; 
function imgMove(){ 
    if(moveWork==false){ 
       // 0d\일경우 left방향 
      if(moveType==0){ 
         // 맨처음 이미지의 폭 
         var aWidth = jQuery(".RollDiv > div > a:first").width(); 
         // 롤링마지막에 맨처음의 a태그 추가 
         jQuery(".RollDiv > div").append("<a href=\""+jQuery(".RollDiv > div > a:first").attr("href")+"\">" + jQuery(".RollDiv > div > a:first").html()+ "</a>"); 
         // 맨처음이미지를 왼쪽으로 이동시킨다. 
         jQuery(".RollDiv > div > a:first").animate({marginLeft:-aWidth},{duration:moveSpeed,step:function(){ 
         // 이동중 만약 일시정지 flag가 true라면 
         if(movePause==true){ 
            // 이동을 멈춘다 
            jQuery(this).stop(); 
         } 
         },complete:function(){ 
         // 이동을 마친후 첫번째 a태그를 지워버린다 
         jQuery(this).remove(); 
         // 이미지 움직이는것을 다시 실행 
         imgMove(); 
      }}); 
      }else{ 
      // 마지막 a태그의 폭 
       var aWidth = jQuery(".RollDiv > div > a:last").width(); 
       // a태그 앞에 마지막의 a태그를 생성한다 단 스타일은 마지막 a태그의 폭만큼 빼준다 
       jQuery("<a href=\"" + jQuery(".RollDiv > div > a:last").attr("href")+ "\" style=\"margin-left:-" + aWidth + "px\">" + jQuery(".RollDiv > div > a:last").html()+ "</a>").insertBefore(".RollDiv > div > a:first") 
       // 맨처음 a태그의 margin-left를 다시 0으로 맞춰준다. 
      jQuery(".RollDiv > div > a:first").animate({marginLeft:0},{duration:moveSpeed,step:function(){ 
       // 이동중 만약 일시정지 flag가 true라면 
       if(movePause==true){ 
          // 이동을 멈춘다 
          jQuery(this).stop(); 
       } 
       },complete:function(){ 
       // 이동을 마친후 마지막 a태그를 지워버린다 
       jQuery(".RollDiv > div > a:last").remove(); 
       // 이미지 움직이는것을 다시 실행 
       imgMove(); 
    }}); 
 } 
 } 
 } 
 function goMove(){ 
    // 일시정지가 풀려있을 경우를 대비하여 일시정지를 풀러준다 
    movePause=false; 
    // 0d\일경우 left방향 
    if(moveType==0){ 
       imgMove(); 
       }else{ 
       jQuery(".RollDiv > div > a:first").animate({marginLeft:0},{duration:moveSpeed,step:function(){ 
       // 이동중 만약 일시정지 flag가 true라면 
       if(movePause==true){ 
          // 이동을 멈춘다 
          jQuery(this).stop(); 
      } 
       },complete:function(){ 
      // 이동을 마친후 마지막 a태그를 지워버린다 
      //$(".RollDiv > div > a:last").remove(); 
      // 이미지 움직이는것을 다시 실행 
      imgMove(); 
   }}); 
}
   
}
imgMove(); 
              
            
!
999px

Console