Jquery 슬라이드 쇼 왼쪽에서 오른쪽으로 슬라이드 효과

Question

주기에서 왼쪽에서 오른쪽으로 이동하는 슬라이더를 만들려고했습니다. 첫 번째 div 만 작동하고 밖으로 나가고 모든 것이 멈 춥니 다.

당신은 아마이 필요한 것입니다 here

$(document).ready(function() { 
    var delay = 3000, 
     fade = 1000; 
    var banners = $('.banner'); 
    var len = banners.length; 
    var i = 0; 
    setTimeout(cycle, delay); 

    function cycle() { 
     $(banners[i % len]).hide("slide", { 
      direction: "left" 
     }); 
     (fade, function() { 
      $(banners[++i % len]).show("slide", { 
       direction: "right" 
      }); 
      (fade, function() { 
       setTimeout(cycle, delay); 
      }); 
     }); 
    } 
}); 

당신에게

Answer 1

감사 작업 예제를 볼 수 있습니다 Updated Fiddle

첫째, 당신의 코드가 호출되지 않습니다

(fade, function() { 
    $(banners[++i % len]).show("slide", { 
     direction: "right" 
    }); 
    (fade, function() { 
     setTimeout(cycle, delay); 
    }); 
}); 

이로 인해이 발생합니다.3210 함수는 루프를 통해 모든 x초 이상, 그것은 setInterval를 사용하는 것이 좋습니다해야하는 귀하의 경우 있도록, setTimeout을 사용하기 때문에, 한 번 트리거, 그래서 변경됩니다

setTimeout(cycle, delay); 

에

setInterval(cycle, delay); 

다음 cycle 기능을 위해,이

function cycle() { 
    $(banners[i % len]).hide("slide", { 
     direction: "left" 
    }); 
    $(banners[++i % len]).show("slide", { 
     direction: "right" 
    }); 
} 

에 코드를 변경하고 승, 코드를 끝났어 아프다. .banner가 block 요소 인 div 때문에 그러나, 1 div이 hidden 전에 2 div가 표시되었을 때 .banner 2 라인에있을 것입니다, 그래서 당신은 그래서를 .banner에 style

position: absolute; 

를 추가해야