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

Question

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