Question

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

中的Carousel

我已经通过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>

我还为导航项目创建了一个后续的mouseleave函数（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今天和你两个月前看到的一样。

Nivo Slider：Skype.com Carousel Effect - 基于CurrentSlide更改Nav的CSS

1 个答案: