项目中对于首页中的图片切换展示需要修改部分功能,而使用的是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);
这样,右下角的按钮点击就只能切换图片而不会跳转了.
如果觉得《[原创]修改jquery.slideBox.js插件 自定义部分事件》对你有帮助,请点赞、收藏,并留下你的观点哦!