Nivo滑块(raphaeljs)的外部控制(下一个/上一个)?

时间:2011-07-26 19:11:34

标签: javascript jquery raphael nivo-slider

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

3 个答案:

答案 0 :(得分:10)

在初始化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();
    });

答案 1 :(得分:3)

$("#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()

答案 2 :(得分:1)

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