Nivo Slider (raphaeljs) 的外部控件（下一个/上一个）？答案

【问题标题】：External Controls (Next / Prev) for Nivo Slider (raphaeljs)?Nivo Slider (raphaeljs) 的外部控件（下一个/上一个）？
【发布时间】：2011-07-26 19:11:34
【问题描述】：

我正在尝试制作带有下一个/上一个按钮的幻灯片。我使用 NivoSlider 进行酷炫的过渡，使用 raphaelJS 进行动画下一个/上一个按钮。我唯一的问题是没有内置方法可以为 Nivoslider 提供代表下一个按钮的元素。因为我的元素是一个动画三角形，所以我需要以某种方式让 NivoSlider 知道我希望 $(triangle.node) 代表下一个和上一个。该库是私有的（我认为这就是您表达的方式），因此它看不到 triangle.node 全局。有什么想法吗？

【问题讨论】：

标签： javascript jquery raphael nivo-slider

【解决方案1】：

在初始化 Nivo Slider 之前添加此代码，并将参数替换为您的 triangleNodePrev / Next。这样做的好处是禁用链接上的默认操作，这样如果您使用 href="#" 浏览器就不会滚动回页面顶部。

$('#previousButton, #nextButton').on('click', function (e) {

         // Prevent the link from being followed
         e.preventDefault();

         // Initialize variables 
         var buttonId = this.id,
          buttonClass = ('previousButton' == buttonId) ? '.nivo-prevNav' : '.nivo-nextNav';

         // Trigger the slider button
         $('.nivo-directionNav').find(buttonClass).click();
    });

【讨论】：

【解决方案2】：

$("#triangleNodePrev").click(function(){$(".nivo-directionNav .nivo-prevNav").click()})
$("#triangleNodeNext").click(function(){$(".nivo-directionNav .nivo-nextNav").click()})

应该这样做但无论如何你需要的命令是

$(".nivo-directionNav .nivo-prevNav").click()

和

$(".nivo-directionNav .nivo-nextNav").click()

【讨论】：

+1 表示正确的方法。我接受了你所拥有的，并发布了一个稍微复杂一点的答案，因为我认为 prevent default 和 single 函数让它值得额外的行。
我选择了其他答案，但也感谢您提供此解决方案。 +1。
这很酷。我也更喜欢 Dylan 的解决方案。 :P 感谢您的 +1 :)
这是一个更好的答案。

【解决方案3】：

<script type='text/javascript'>
$(document).ready(function() {
    jQuery("#previousButton').click(function (e) {
         e.preventDefault();
         jQuery(".nivo-directionNav .nivo-prevNav").click();
    });
    jQuery("#nextButton').click(function (e) {
         e.preventDefault();
         jQuery(".nivo-directionNav .nivo-nextNav").click();
    });
});
</script>

【讨论】：