[原创]修改jquery.slideBox.js插件,自定义部分事件

项目中对于首页中的图片切换展示需要修改部分功能,而使用的是jquery.slideBox插件

修改:让右下角的按钮点击不会跳转页面,只是切换图片

插件中会先

var lis = ul.find('li');//获取右下角的圆圈
然后会去遍历此dom集合

lis.each(function(i,n){
//.<关键代码>..对每个按钮添加样式或者触发事件
})
在上面这个遍历函数中会有

$('<a>').attr('href', href).text(text).addClass(css).css('borderRadius', settings.clickBarRadius+'px').mouseover(function(){

wrapper.data('over', 1);
$(this).addClass('active').siblings().removeClass('active');
ul.find('li:eq('+$(this).index()+')').addClass('active').siblings().removeClass('active');
start();
}).appendTo(nums);

这样的处理,我在这里全部注释,自定义添加样式和事件

var style = {
'borderRadius':settings.clickBarRadius+'px',
'border': '2px solid',
'background-color': '#C3C8CF',
'width': '10px',
'height': '10px',
'display': 'inline-block',
'margin-top': '14px',
'text-align': 'center',
/*'color': 'white',*/
'margin-right': '6px',
'cursor': 'pointer'
}
var index = i+1;
$('<span>').attr('href', href).addClass(css).css(style).click(function(){

wrapper.data('over', 1);
$(this).addClass('active').siblings().removeClass('active');
ul.find('li:eq('+$(this).index()+')').addClass('active').siblings().removeClass('active');
start();
}).appendTo(nums);

这样,右下角的按钮点击就只能切换图片而不会跳转了.