滑動div與jQuery的循環

我的代碼下面的工作有點狗，所以我需要你的專業知識來解決這兩個問題。我知道很多例子，但我想學習一點，也有一個更清晰的代碼。滑動div與jQuery的循環

滑動時，DIV項不會並排顯示。另一個是錯誤的。
我可以增強jQuery代碼使其循環或更動態，因此看起來更專業。如果我有100個DIV，那麼將無法處理。
它永遠不會停止。

感謝

<html> 
    <style> 
    *   { margin: 0px; padding: 0px; } 
    #cover  { width: 100%; height: 300px; background: #CCCCCC; } 
    #cover div { width: 100%; height: 200px; background: #FFFFFF; } 
    .content { text-align: center; } 
    </style> 
    <head> 
     <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/> 
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script> 
     <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script> 
     <script type="text/javascript"> 
      $(document).ready(function() 
      { 
       event.preventDefault(); 

       $('#slider_2').hide().delay(5000); 
       $('#slider_3').hide().delay(10000); 
       $('#slider_1').show('slide', { direction: 'left' }, 1000); 
       $('#slider_1').delay(4000).hide('slide', { direction: 'left' }, 1000); 
       $('#slider_2').show('slide', { direction: 'right' }, 1000); 
       $('#slider_2').delay(4000).hide('slide', { direction: 'right' }, 1000); 
       $('#slider_3').show('slide', { direction: 'left' }, 1000); 
       $('#slider_3').delay(4000).hide('slide', { direction: 'left' }, 1000); 
      }); 
     </script> 
    </head> 

    <body> 
     <div id="cover"> 
      <div id="slider_1"><p class="content">SLIDER ONE</p></div> 
      <div id="slider_2"><p class="content">SLIDER TWO</p></div> 
      <div id="slider_3"><p class="content">SLIDER THREE</p></div> 
     </div> 
    </body> 
</html>

來源

2012-08-02 BentCoder

這些動畫需要正確鏈接。對於一個元素都必須出現在一個聲明：

$('#slider_1').show(...).delay(4000).hide(...);

否則jQuery將可能覆蓋的第一個動畫鏈（顯示）在第二語句中的第二鏈（延遲隱藏）。

來源

2012-08-02 10:56:37

好吧，我現在鏈接他們。我的3個問題的解決方案如何？ – BentCoder 2012-08-02 11:35:56

滑動div與jQuery的循環

回答

相關問題