jquery新聞滑塊

Question

我想克隆這個插件，你在這裏看到http://www.veterama-szene.de/在熱門新聞。

在頂部故事上方的MouseOver上，故事顯示在較大的左側框中。如果光標不在整個Top Story Box中，則Top Stories會自動更改。

所以我編寫腳本到目前爲止，MouseOver函數的作品。你會瀏覽一個頂級的故事，並將它克隆到更大的左邊框。 但該自動更改不起作用。所以請幫助我完成這項工作。謝謝。

jQuery的

<script type=\"text/javascript\"> 
    $(document).ready(function(){ 
     $('.listnews .newsitem').hover(
      function() { 
       $('.bignews').html(''); 
       $(this).clone().appendTo('.bignews'); 
       $('.bignews').show(); 
      }, 
      function() { 
       $('.bignews').show(); 
      } 
     ), 
     $(function() { 
       $('.bignews').html(''); 
       $('#item1').clone().appendTo('.bignews'); 
       $('.bignews').show(); 
      }); 

    }); 
</script> 

HTML

<table border="0" cellpadding="0" cellspacing="0" class="news"> 
    <tr> 
     <td class="bignews"> 
     </td> 

     <td class="listnews"> 
     <div class="newsitem" id="item1"> 
     <div> 
     <h4>headline</h4></div> 
     <p>text</p> 
     </div> 
     <div class="newsitem" id="item2"> 
     <div> 
     <h4>headline</h4></div> 
     <p>text</p> 
     </div> 
     <div class="newsitem" id="item3"> 
     <div> 
     <h4>headline</h4></div> 
     <p>text</p> 
     </div> 
     <div class="newsitem" id="item4"> 
     <div> 
     <h4>headline</h4></div> 
     <p>text</p> 
     </div> 
     <div class="newsitem" id="item5"> 
     <div> 
     <h4>headline</h4></div> 
     <p>text</p> 
     </div> 
     </td> 
    </tr> 
</table> 

Answer 1

有一些你可以做到這一點的方式，但是，它的要點是有一個調度程序，將通過您的新聞項目上的旋轉間隔。當用戶將鼠標懸停在項目上時，將顯示該項目並禁用調度程序。

我也會推薦一些效果來保持過渡平滑和不那麼震撼。

這裏是一個過分簡化的解決方案，讓您開始

(function() { 
    var onReady = function() { 
     var newsItems = $('.listnews > .newsitem'); 
     var bigNews = $('.bignews'); 
     var interval = NaN; 
     var duration = 4000; 
     var current = 0; 
     var total = newsItems.length; 

     var stopSlideShow = function() { 
      clearInterval(interval); 
     }; 

     var startSlideShow = function() { 
      stopSlideShow(); 

      interval = setInterval(function() { 
       if (++current > total) { 
        current = 1; 
       } 


       bigNews.html($(['#item', current].join('')).clone()).show(); 

      }, duration); 
     }; 

     $(newsItems).hover(function() { 
      stopSlideShow(); 
      bigNews.html($(this).clone()).show(); 
     }, function() { 
      startSlideShow(); 
      bigNews.html($('#item1').clone()).show(); 
     }); 

     startSlideShow(); 
    }; 

    $(document).ready(onReady); 
})();