Question

我们目前正在以下网站上工作： 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'更改为适当的链接，但这似乎没有办法。

感谢您的帮助！

此致卡斯帕

Answer 1

您可以调用Nivo滑块插件中的方法来实现'slideTo'或'go to slide'，而无需修改插件代码。

在所需幻灯片之前将currentSlide的索引设置为1，然后
触发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);

Answer 2

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

它有一个新功能slideTo（）似乎很适合这个。

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

$('#slider').data('nivoslider').slideTo(1);

Answer 3

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）意味着只能从slider元素中确认控件，通常是#slider div中的任何内容。如果您使用未缩小的jquery.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，但这是默认设置。

Answer 4

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

$('.nivo-control[rel="3"]').trigger("click");

Nivo滑块，使自定义链接在点击时更改幻灯片

4 个答案: