[原创]修改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);

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