Nivo滑块（raphaeljs）的外部控制（下一个/上一个）？

Question

我正在尝试使用下一个/上一个按钮进行幻灯片放映。 我正在使用NivoSlider进行酷转换，使用raphaelJS进行动画下一个/上一个按钮。 我唯一的问题是没有内置的方法可以为Nivoslider提供代表下一个按钮的元素。 因为我的元素是一个动画的三角形，我需要让NivoSlider知道我想要$（triangle.node）代表next和previous。 该库是私有的（我认为你是如何表达的）所以它看不到triangle.node全局。 有任何想法吗？

Answer 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();
    });

Answer 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()

Answer 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>