겹치는 슬라이드, div에 겹쳐진 얻을

Question

여기서 첫번째 블록

$(document).ready(function(){ 

        var refreshId = setInterval(function() 
        {  
         $('.box').each(function() { 
          if ($(this).offset().left < 0) { 
           $(this).css("left", "150%"); 
          } else if ($(this).offset().left > $('#container').width()) { 
           $(this).animate({ 
            left: '50%' 
           }, 500); 
          } else { 
           $(this).animate({ 
            left: '-150%' 
           }, 500); 
          } 
         }); 
        },5000); 

//the second block is to move the div's to left on clicking the leftbutton    

     $(".leftbutton").click(function(){ 
        $('.box').each(function() { 
         if ($(this).offset().left < 0) { 
          $(this).css("left", "150%"); 
         } else if ($(this).offset().left > $('#container').width()) { 
          $(this).animate({ 
           left: '50%' 
          }, 500); 
         } else { 
          $(this).animate({ 
           left: '-150%' 
          }, 500); 
         } 
        }); 
       }); 
the third block is to move the div's to right side on click of right button 



       $(".rightbutton").click(function(){ 
        $('.box').each(function() { 
         if ($(this).offset().left < 0) { 
          $(this).animate({ 
           left: '50%' 
          }, 500); 
         } else if ($(this).offset().left > $('#container').width()) { 
          $(this).css({ 
           'left': '-150%' 
          }); 
         } else { 
          $(this).animate({ 
           left: '150%' 
          }, 500); 
         } 
        }); 
       }); 
      }); 


//the below is the HTML 

<div id="container"> 

     <div id="box1" class="box">Div #1</div> 
     <div id="box2" class="box">Div #2</div> 
     <div id="box3" class="box">Div #3</div> 

    </div> 

// the below is the CSS 



body { 
     padding: 0px;  
    } 

    #container { 
     position: absolute; 
     margin: 0px; 
     padding: 0px; 
     width: 100%; 
     height: 100%; 
     overflow: hidden; 
    } 

    .box { 
     position: absolute; 
     width: 50%; 
     height: 300px; 
     line-height: 300px; 
     font-size: 50px; 
     text-align: center; 
     border: 2px solid black; 
     left: 50%; 
     top: 100px; 
     margin-left: -25%; 
    } 

    #box1 { 
     background-color: green; 
     left: -150%; 
    } 

    #box2 { 
     background-color: yellow; 
    } 

    #box3 { 
     background-color: red; 
     left: 150%; 
    } 

그래서 기본적 몇 시행 착오 1,2- & 3은 div의 후 매 5 초 후에는 div 슬라이딩 자동위한 중복되어 하나의 div 만 보입니다. 문제에 도달하기 전에 코드를 몇 번 사용해 봐야 할 것입니다. 이제 완전히 동시에 수동 및 자동 애니메이션의 선두로부터이 문제를 해결 // 자바 스크립트 상기

Answer 1

$(document).ready(function(){ 
    var refreshId; 
    var restartAnimation = function() { 
     clearInterval(refreshId); 
     refreshId = setInterval(function() 
     {  
      $('.box').each(function() { 
       if ($(this).offset().left < 0) { 
        $(this).css("left", "150%"); 
       } else if ($(this).offset().left > $('#container').width()) { 
        $(this).animate({ 
         left: '50%' 
        }, 500); 
       } else { 
        $(this).animate({ 
         left: '-150%' 
        }, 500); 
       } 
      }); 
     },1000); 
    } 

    restartAnimation() 

    $(".leftbutton").click(function(){ 
     restartAnimation(); 
     $('.box').each(function() { 
      if ($(this).offset().left < 0) { 
       $(this).css("left", "150%"); 
      } else if ($(this).offset().left > $('#container').width()) { 
       $(this).animate({ 
        left: '50%' 
       }, 500); 
      } else { 
       $(this).animate({ 
        left: '-150%' 
       }, 500); 
      } 
     }); 
    }); 
    $(".rightbutton").click(function(){ 
     restartAnimation(); 
     $('.box').each(function() { 
      if ($(this).offset().left < 0) { 
       $(this).animate({ 
        left: '50%' 
       }, 500); 
      } else if ($(this).offset().left > $('#container').width()) { 
       $(this).css({ 
        'left': '-150%' 
       }); 
      } else { 
       $(this).animate({ 
        left: '150%' 
       }, 500); 
      } 
     }); 
    }); 
}); 

는 자동 리셋 애니메이션 함수를 호출함으로써 회피하고있다. 이것은 div가 겹치도록하지 않습니다. 이것은 내가 생각해 낸 것이 아닙니다. 나는 다른 사람에게서 도움을 받았다. 하지만 여전히 비슷한 문제가 발생할 수있는 사람에게 답을 나누고 싶었습니다.