Question

我正在使用循环插件和其他一些jquery脚本，我也使用选项来控制带有外部导航的循环插件幻灯片，即<li>下的ul#pan_ul元素。

一切似乎都运行良好，我将超时设置为：8000，但是在几次点击导航不同幻灯片后，周期超时频率似乎会增加，并变得可变。一张幻灯片似乎超时2000，接下来是5000，然后是1000.再一次，只有在点击一些导航灯后才会发生这种情况，它会事先完好无损地运行。这是我的代码：

function cycleIt(){
$('#showcase').cycle({ 
    fx:     'scrollRight',
    timeout: 8000,
    before:  onBefore,
    pager:  '#pan_ul',
        pagerAnchorBuilder: function(idx, slide) { 
        // return selector string for existing anchor 
        return '#pan_ul li:eq(' + idx + ')'; 
        }
 });
}

function onBefore(){
    var currentPanel = $(this).index();
    var lastPanel = $(this).index()-1;
    if (lastPanel != -1) {
            $("#pan_ul li:eq("+currentPanel+")").css({"background-image":"url(Images/panelslice_ON.jpg)"})
            $("#pan_ul li:eq("+lastPanel+")").css({"background-image":"url(Images/panelslice.jpg)"});
                }
                else {
                $("#pan_ul li:first").css({"background-image":"url(Images/panelslice_ON.jpg)"})
                $("#pan_ul li:last").css({"background-image":"url(Images/panelslice.jpg)"});
                }           
}


$("#pan_ul li").click(function(){
    var oldPanel = $(".case:visible").index();
    var ind = $(this).index('#pan_ul li');

    $("#pan_ul li").css({"background-image":"url(Images/panelslice.jpg)"})
    $("#pan_ul li:eq("+ind+")").css({"background-image":"url(Images/panelslice_ON.jpg)"})
    /*$('#showcase').cycle('stop');
return false;
    $(".case:eq("+oldPanel+")").hide();
    $(".case:eq("+ind+")").show();


*/
})
});

我已经上传了我在网上制作的测试网站，如果你想亲自检查一下。动作是每8秒一次。为了看到问题，只需在滚动导航的不同项目中像疯子一样点击几秒钟。然后观看幻灯片中的超时更改。

http://almostfamousevents.com/TEST/

Answer 1

我尝试在chrome中重现，一秒钟的超时似乎发生了变化，但随后恢复正常。所以这让我怀疑问题来源是点击的一些冒泡事件。你可以停止事件冒泡和默认行为，如果设置在某处调用以下内容：

$.click(function(event){
event.preventDefault();
event.stopPropagation() ;
//rest of your code

点击后Jquery循环插件超时加速？

1 个答案: