jQuery lightslider插件分页器onclick事件
我想获得jquery lightslider插件的pager元素的onclick事件,我尝试了以下代码jQuery lightslider插件分页器onclick事件,jquery,jquery-plugins,slider,Jquery,Jquery Plugins,Slider,我想获得jquery lightslider插件的pager元素的onclick事件,我尝试了以下代码 var $slide = $('#light-slider').parent('.lSSlideWrapper'); var $cSouter = $slide.parent(); var $pager = $cSouter.find('.lSPager').find('li').find('a'); console.log($pager); $pager.on('cl
var $slide = $('#light-slider').parent('.lSSlideWrapper');
var $cSouter = $slide.parent();
var $pager = $cSouter.find('.lSPager').find('li').find('a');
console.log($pager);
$pager.on('click',function(){
console.log('test');
});
pager
的console.log打印以下值
[a, a, a, a, prevObject: n.fn.init[4], context: document, selector: ".lSPager li a"]
但是link onclick事件没有触发,我可以知道我做错了什么。你最大的问题是插件绑定到寻呼机控件的函数以
return false结束代码>,防止此事件进一步冒泡,因此不会调用在此事件之后绑定到元素的其他函数
$pager.on('click', function() {
if (settings.loop === true && settings.mode === 'slide') {
scene = scene + ($pager.index(this) -
$cSouter.find('.lSPager').find('li.active').index());
} else {
scene = $pager.index(this);
}
$el.mode(false);
if (settings.gallery === true) {
$this.slideThumb();
}
clearInterval(interval);
return false; // this line prevents any further bubbling for this event so not other functions that are bound to the element after this are going to get called
});
IMHO,解决这个问题最干净的方法是修改插件,添加一个回调函数,如onBeforePageChange
,这将允许您执行以下操作:
$('#responsive').lightSlider({
item:4,
loop:false,
slideMove:2,
easing: 'cubic-bezier(0.25, 0, 0.25, 1)',
speed:600,
responsive : [
{
breakpoint:800,
settings: {
item:3,
slideMove:1,
slideMargin:6,
}
},
{
breakpoint:480,
settings: {
item:2,
slideMove:1
}
}
],
onBeforePageChange: function () { // this is a custom callback we have added
console.log('onBeforePrevSlide called'); // do what ever you want here, like play the slider after a delay
}
});
这是一个插件代码中添加了回调的例子,它必须在按钮被点击时出现,还是在幻灯片切换到下一个或上一个时就足够了?事实上,当点击寻呼机时幻灯片会暂停,但我想在10秒后播放,我不确定我是否遵循了。你能制作一个JSFIDLE来显示这个问题吗?看这个链接好的,你能更详细地解释一下你希望它做什么吗?