NIVO滑塊：Skype.com輪轉效果 - 基於CurrentSlide

Question

我一直在試圖創建一個基於NIVO滑塊滑動器的外觀和類似旋轉木馬的功能發現在http://www.skype.com/intl/en/home

我已經看到問題的資產淨值變化CSS通過Ashfame和Chris_Mac，但是我在週末的大部分時間都在圈圈。現在回到原點，從基礎開始。

我迄今設法讓導航工作，使得在一個特定的導航項目的mouseenter觸發NIVO-controlNav以顯示正確的幻燈片，並暫停滑塊：

<script type="text/javascript">  
$("ul#nav_1").mouseenter(
    function() { 
     $(".nivo-controlNav a:nth-child(2)").click(); 
     $('#slider').data('nivoslider').stop(); 
    }); 
</script> 

我還創建了一個後續的鼠標離開功能對於導航項目（1,2,3等）

<script type="text/javascript"> 
$("ul#nav_1,ul#nav_2,ul#nav_3").mouseleave(
    function() { 
     $('#slider').data('nivoslider').start(); 
     }); 
    </script> 

我現在被困在那裏的非鼠標事件進來的部分，當把滑動荷載應該更新NAV CSS突出當前已選擇導航項目。這是我得到的（不是我知道的很多，但我正在嘗試）。

<script type="text/javascript"> 
$(window).load(function() { 
    $('#slider').nivoSlider({ 
     beforeChange: function(){ // this function should load css styles 
      var slide_num = $('#slider').data('nivo:vars').currentSlide; 
      function scrollBannerCss() { 
      if (slide_num == 1) { 
       $("ul#nav_1").css("backgound-color", "blue"); 
       } 
      } 
     }, 
     afterChange: function(){ // this function should unload css styles 
    }); 
}); 
</script> 

那麼簡單的HTML導航菜單：

<ul id="nav"> 
    <li id="nav_1">button 1</li> 
    <li id="nav_2">button 2</li> 
    <li id="nav_3">button 3</li> 
</ul> 

任何幫助/創意/冥想將非常感激！

Answer 1

我知道這是有點老，但你可能想看看http://www.agilecarousel.com/。

http://www.agilecarousel.com/flavor_3.htm是你說的確切的事情，考慮到今天的skype.com是你在兩個月前看到的同樣的事情。