Nivo Slider：Skype.com 轮播效果 - 根据 CurrentSlide 更改导航的 CSS

Question

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

我已查看 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 等）创建了一个后续的 mouseleave 函数。）

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

我现在陷入了非鼠标事件进入的部分。当滑块加载时，它应该更新导航 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 与您两个月前看到的情况相同。