4

我们目前正在以下网站上工作： http ://www.temminktrainingcoaching.nl/beta

有一个 lavalamp 菜单，带有一个 Nivo Slider，我们想将它们链接在一起。如您所见，菜单中有 5 张幻灯片和 5 个链接。我们希望他们通信。这是 nivoslider 中更改幻灯片的代码：

$('.nivo-controlNav a', slider).live('click', function(){
            if(vars.running) return false;
            if($(this).hasClass('active')) return false;
            clearInterval(timer);
            timer = '';
            slider.css('background','url("'+ vars.currentImage.attr('src') +'") no-repeat');
            vars.currentSlide = $(this).attr('rel') - 1;
            nivoRun(slider, kids, settings, 'control');
        });

我对 jquery 很陌生，我不知道如何创建自定义链接。我试图将 '.nivo.controlNav a' 更改为适当的链接，但这似乎没有奏效。

谢谢你的帮助！

问候，卡斯帕

4

4 回答 4

5

您可以调用 Nivo 滑块插件中的方法来实现“slideTo”或“转到幻灯片”，而无需修改插件代码。

  1. 将 currentSlide 的索引设置为所需幻灯片之前的一，然后，
  2. 在 nextNav 中触发单击以前进。

注意：如果您动态更新 nivo 滑块图像，这也是一个很好的解决方案。在这种情况下，更新图像源，然后滑动到 currentSlide。所有切片将由 nivo 更新并显示新图像。

将其包装为 jQuery 函数并调用它：

 (function($) { 
         // slideTo function for nivo-slider
        $.slideTo = function(idx) {
            $('#slider').data('nivo:vars').currentSlide = idx - 1;
            $("#slider a.nivo-nextNav").trigger('click'); 
        }
  })(jQuery);
  // call the function
  // example:
  $.slideTo(3);
于 2012-05-16T06:36:32.513 回答
3

我能够通过使用 github 上可用代码的一个分支来解决这个问题： https ://github.com/gilbitron/Nivo-Slider/pull/176

它有一个新功能 slideTo() 似乎对此很有效。

调用此代码跳转到幻灯片 2

$('#slider').data('nivoslider').slideTo(1);
于 2011-10-03T06:47:23.553 回答
2

Nivo 自己的导航控件通过以下代码进行操作：

<div class="nivo-controlNav">
  <a class="nivo-control" rel="0">1</a>
  <a class="nivo-control" rel="1">2</a>
  <a class="nivo-control" rel="2">3</a>
  <a class="nivo-control" rel="3">4</a>
</div>

如果不是控制函数的第一行，我们可以复制它来创建我们自己的自定义导航：

$('.nivo-controlNav a', slider).live('click', function(){

jQuery 标识符 ( ) 的第二个参数slider意味着控件只能从滑块元素内确认，通常是#sliderdiv 内的任何内容。如果您使用 un-minifiedjquery.nivo-slider.js并删除slider参数，那么您可以在自己的导航中使用上述代码。修改后的函数应如下所示：

        $('.nivo-controlNav a').live('click', function(){
            if(vars.running) return false;
            if($(this).hasClass('active')) return false;
            clearInterval(timer);
            timer = '';
            slider.css('background','url("'+ vars.currentImage.attr('src') +'") no-repeat');
            vars.currentSlide = $(this).attr('rel') - 1;
            nivoRun(slider, kids, settings, 'control');
        });

也就是说，'a'元素中的任何元素'.nivo-contolNav'都将控制滑块。使用 " rel" 属性来指定您想要的滑块页面。

此外，该controlNav设置必须设置为 true，但这是默认设置。

于 2012-05-10T15:20:33.877 回答
2

您可以触发点击 Nivo 生成的相关控制链接，例如，将滑块更改为第 4 个链接：

$('.nivo-control[rel="3"]').trigger("click");
于 2013-10-09T09:16:50.977 回答