jquery - Nivo Slider : Skype. com Carousel Effect - 基于CurrentSlide改变Nav的CSS

Question

我一直在尝试创建一个基于 Nivo Slider 的 slider ，其外观和功能类似于 http://www.skype.com/intl/en/home 中的 Carousel|

我已查看 Ashfame 的问题和 Chris_Mac ，然而周末的大部分时间我一直在兜圈子。现在回到第一步，从基础开始。

到目前为止，我已经设法让导航正常工作，这样在特定导航项上的鼠标输入会触发 nivo-controlNav 以显示正确的幻灯片并暂停 slider :

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

我还为导航项(1、2、3 等)创建了一个后续的 mouseleave 函数

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

我现在停留在非鼠标事件进入的部分。当 slider 加载时，它应该更新导航 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 与您两个月前看到的是同一件事，这就是您所说的内容。