팁/튜토리얼

jQuery 움직이는 배너

2015.08.03 13:22
3,438
0
0

http://codepen.io/eond/pen/jPXeBW

 

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

eond Lv. 12

댓글 0