基本的JQuery Slider卡在第二张幻灯片上

时间:2013-11-06 00:28:03

标签: jquery slideshow

我正在尝试在我的主页上修复此滑块:example.com。

滑块偶尔可以正常工作,但至少有90%的时间卡在第二张幻灯片上(如果它超过第二张幻灯片,那就完全没问题了)。我不得不猜测插件会以某种方式崩溃,因为滑动不起作用 - 图像仍然存在,您可以手动点击它们。

原始网站在主目录中有很多无关的文件,所以我只是在这个网址上复制了主页。

这实际上是我在StackOverflow上的第一篇文章,我也是JS的初学者,所以我不确定这是否有用但是我会在下面发布JS代码,尽管它被“最小化”并且超级难读。

感谢您的帮助!

(function(a){a.fn.bjqs=function(b){var c={},d={width:700,height:300,animation:"fade",animationDuration:450,automatic:true,rotationSpeed:4e3,hoverPause:true,showControls:true,centerControls:true,nextText:"Next",prevText:"Prev",showMarkers:true,centerMarkers:true,keyboardNav:true,useCaptions:true},e=this,f=e.find(".bjqs"),g=f.children("li"),h=g.length,i=false,j=false,k=0,l=1,m=0,n=g.eq(k),o="forward",p="backward";c=a.extend({},d,b);g.css({height:c.height,width:c.width});f.css({height:c.height,width:c.width});e.css({height:c.height,width:c.width});g.addClass("bjqs-slide");if(c.showControls&&h>1){var q=a('<ul class="bjqs-controls"></ul>'),r=a('<li><a href="#" class="bjqs-next" class="controls">'+c.nextText+"</a></li>"),s=a('<li><a href="#" class="bjqs-prev" class="controls">'+c.prevText+"</a></li>");r.click(function(a){a.preventDefault();if(!i){A(o,false)}});s.click(function(a){a.preventDefault();if(!i){A(p,false)}});r.appendTo(q);s.appendTo(q);q.appendTo(e);if(c.centerControls){var t=r.children("a"),u=(e.height()-t.height())/2;r.children("a").css("top",u).show();s.children("a").css("top",u).show()}}if(c.showMarkers&&h>1){var v=a('<ol class="bjqs-markers"></ol>'),w,x,u;a.each(g,function(b,d){if(c.animType==="slide"){if(b!==0&&b!==h-1){w=a('<li><a href="#">'+b+"</a></li>")}}else{b++;w=a('<li><a href="#">'+b+"</a></li>")}w.click(function(c){c.preventDefault();if(!a(this).hasClass("active-marker")&&!i){A(false,b)}});w.appendTo(v)});x=v.children("li");x.eq(k).addClass("active-marker");v.appendTo(e);if(c.centerMarkers){u=(c.width-v.width())/2;v.css("left",u)}}if(c.keyboardNav&&h>1){a(document).keyup(function(a){if(!j){clearInterval(z);j=true}if(!i){if(a.keyCode===39){a.preventDefault();A(o,false)}else if(a.keyCode===37){a.preventDefault();A(p,false)}}if(j&c.automatic){z=setInterval(function(){A(o)},c.rotationSpeed);j=false}})}if(c.useCaptions){a.each(g,function(b,c){var d=a(c);var e=d.children("img:first-child");var f=e.attr("title");if(f){var g=a('<p class="bjqs-caption">'+f+"</p>");g.appendTo(d)}})}if(c.hoverPause&&c.automatic){e.hover(function(){if(!j){clearInterval(z);j=true}},function(){if(j){z=setInterval(function(){A(o)},c.rotationSpeed);j=false}})}if(c.animation==="slide"&&h>1){$first=g.eq(0);$last=g.eq(h-1);$first.clone().addClass("clone").removeClass("slide").appendTo(f);$last.clone().addClass("clone").removeClass("slide").prependTo(f);g=f.children("li");h=g.length;$wrapper=a('<div class="bjqs-wrapper"></div>').css({width:c.width,height:c.height,overflow:"hidden",position:"relative"});f.css({width:c.width*h,left:-c.width});g.css({"float":"left",position:"relative",display:"list-item"});$wrapper.prependTo(e);f.appendTo($wrapper)}var y=function(a){if(c.animation==="fade"){if(a===o){!n.next().length?m=0:m++}else if(a===p){!n.prev().length?m=h-1:m--}}if(c.animation==="slide"){if(a===o){m=l+1}if(a===p){m=l-1}}return m};if(c.automatic&&h>1){var z=setInterval(function(){A(o,false)},c.rotationSpeed)}g.eq(k).show();f.show();var A=function(a,b){if(!i){if(a){m=y(a)}else if(b&&c.animation==="fade"){m=b-1}else{m=b}i=true;if(c.animation==="fade"){if(c.showMarkers){x.eq(k).removeClass("active-marker");x.eq(m).addClass("active-marker")}r=g.eq(m);n.fadeOut(c.animationDuration);r.fadeIn(c.animationDuration,function(){n.hide();k=m;n=r;i=false})}else if(c.animation==="slide"){if(c.showMarkers){x.eq(l-1).removeClass("active-marker");if(m===h-1){x.eq(0).addClass("active-marker")}else if(m===0){x.eq(h-3).addClass("active-marker")}else{x.eq(m-1).addClass("active-marker")}}f.animate({left:-m*c.width},c.animationDuration,function(){if(m===0){l=h-2;f.css({left:-l*c.width})}else if(m===h-1){l=1;f.css({left:-c.width})}else{l=m}i=false})}}};return this}})(jQuery)

2 个答案:

答案 0 :(得分:0)

欢迎来到SO!

我要说的第一件事是http://jsbeautifier.org/是你的朋友......它与缩小js相反。

第二件事是,即使美化了js,它仍然很难遵循。在插件/库有错误的情况下,我通常会寻找替换而不是修复。你考虑过另一个幻灯片插件,例如Nivo Slider吗?它可以作为免费的jquery插件使用(不要被付费的wp插件误导),很漂亮,很容易。

我知道这并不能解答导致您的错误的原因,但希望这是一个可行的解决方法!

答案 1 :(得分:0)

你有没有理由使用旧版本的jQuery? (版本1.6.2)

该版本已超过2年 - 而且bjqs插件与该版本的jQuery不兼容。

如果您没有使用此旧版本的任何特定原因,请更新到最新版本(http://code.jquery.com/),滑块将正常运行。我删除了您网站的来源并在本地进行了测试以确认。

如果您因任何原因需要继续使用1.6.2,那么很遗憾您将不得不使用与该版本的jQuery兼容的其他插件。

希望有所帮助 - 感谢您使用Basic jQuery Slider!