大佬教程收集整理的这篇文章主要介绍了如何绑定和取消绑定事件jquery:carousel脚本修改,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
(function($) { $.fn.easyPaginate = function(options){ var defaults = { step: 4,delay: 100,numeric: true,nextprev: true,auto:false,pause:4000,clickstop:true,controls: 'pagination',current: 'current' }; var options = $.extend(defaults,options); var step = options.step; var lower,upper; var children = $(this).children(); var count = children.length; var obj,next,prev; var page = 1; var timeout; var clicked = false; function show(){ clearTimeout(timeout); lower = ((page-1) * step); upper = lower+step; $(children).each(function(i){ var child = $(this); child.hide(); if(i>=lower && i<upper){ setTimeout(function(){ child.fadeIn('fast') },( i-( Math.floor(i/step) * step) )*options.delay ); } if(options.nextprev){ if(upper >= count) { next.fadeOut('fast'); } else { next.fadeIn('fast'); }; if(lower >= 1) { prev.fadeIn('fast'); } else { prev.fadeOut('fast'); }; }; }); $('li','#'+ options.controls).removeClass(options.current); $('lI[data-index="'+page+'"]','#'+ options.controls).addClass(options.current); if(options.auto){ if(options.clickstop && clicked){}else{ timeout = setTimeout(auto,options.pausE); }; }; }; function auto(){ if(upper <= count){ page++; show(); } }; this.each(function(){ obj = this; if(count>step){ var pages = Math.floor(count/step); if((count/step) > pages) pages++; var ol = $('<ol id="'+ options.controls +'"></ol>').insertAfter(obj); if(options.nextprev){ prev = $('<li class="prev">PrevIoUs</li>') .hide() .appendTo(ol) .click(function(){ clicked = true; page--; show(); }); }; if(options.numeriC){ for(var i=1;i<=pages;i++){ $('<li data-index="'+ i +'">'+ i +'</li>') .appendTo(ol) .click(function(){ clicked = true; page = $(this).attr('data-index'); show(); }); }; }; if(options.nextprev){ next = $('<li class="next">Next</li>') .hide() .appendTo(ol) .click(function(){ clicked = true; page++; show(); }); }; show(); }; }); }; })(jQuery);
我的目标是使class =“prev”和class =“next”按钮始终可见.我删除了hide();代码中的方法,但我还需要删除click事件处理程序,否则我仍然可以点击按钮,即使我在相应的最后一页或第一页上 – 这就是搞乱了.我必须绑定和解除绑定点击事件,但不知道如何正确执行.所以这是我的修改版本:
(function($) { $.fn.easyPaginate = function(options){ var defaults = { step: 4,current: 'current' }; var options = $.extend(defaults,options); var step = options.step; var lower,upper; var children = $(this).children(); var count = children.length; var obj,prev; var page = 1; var timeout; var clicked = false; function show(){ clearTimeout(timeout); lower = ((page-1) * step); upper = lower+step; $(children).each(function(i){ var child = $(this); child.hide(); if(i>=lower && i<upper){ setTimeout(function(){ child.fadeIn('fast') },( i-( Math.floor(i/step) * step) )*options.delay ); } if(options.nextprev){ if(upper >= count) { next.fadeOut('fast'); } else { next.fadeIn('fast'); }; if(lower >= 1) { prev.fadeIn('fast'); } else { prev.fadeOut('fast'); }; }; }); $('li','#'+ options.controls).removeClass(options.current); $('lI[data-index="'+page+'"]','#'+ options.controls).addClass(options.current); if(options.auto){ if(options.clickstop && clicked){}else{ timeout = setTimeout(auto,options.pausE); }; }; }; function auto(){ if(upper <= count){ page++; show(); } }; this.each(function(){ obj = this; if(count>step){ var pages = Math.floor(count/step); if((count/step) > pages) pages++; var ol = $('<ol id="'+ options.controls +'"></ol>').insertAfter(obj); if(options.nextprev){ prev = $('<li class="prev">PrevIoUs</li>') .appendTo(ol) .bind('click',function() { clicked = true; page--; show(); }); }; if(options.numeriC){ for(var i=1;i<=pages;i++){ $('<li data-index="'+ i +'">'+ i +'</li>') .appendTo(ol) .click(function(){ clicked = true; page = $(this).attr('data-index'); show(); }); }; }; if(options.nextprev){ next = $('<li class="next">Next</li>') .appendTo(ol) .bind('click',function() { clicked = true; page++; show(); }); }; show(); }; }); }; })(jQuery);
if(options.nextprev){ prev = $('<li class="prev">PrevIoUs</li>') .appendTo(ol) .bind('click',function() { //check to see if there are any more pages in the negative direction if (page > 0) { clicked = true; page--; show(); } }); } if(options.nextprev){ next = $('<li class="next">Next</li>') .appendTo(ol) .bind('click',function() { //check to see if there are any pages in the positive direction if ((page + 1) < count) { clicked = true; page++; show(); } }); }
更新
如果您希望上一个和下一个按钮永远不会消失,那么您需要删除show()函数中的代码,该代码淡入淡出元素.那部分代码是这样的:
if(options.nextprev){ if(upper >= count) { next.fadeOut('fast'); } else { next.fadeIn('fast'); }; if(lower >= 1) { prev.fadeIn('fast'); } else { prev.fadeOut('fast'); }; };
一个简单的解决方法就是对这个部分进行评论,这是一个演示:http://jsfiddle.net/A4vHf/18/
以上是大佬教程为你收集整理的如何绑定和取消绑定事件jquery:carousel脚本修改全部内容,希望文章能够帮你解决如何绑定和取消绑定事件jquery:carousel脚本修改所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。