1

我正在编写一个滑块...

它有 btns，它会自动更改幻灯片。

但是当我们单击按钮时，setInterval 代码正在发挥作用！

示例中的问题：

它应该在接下来的 5 秒内改变幻灯片。好的 ？

但是当我们在 2 秒后点击箭头时

setintrelval 应该在接下来的 5s 自动改变幻灯片。但它会在接下来的 3 秒内发生变化。

// other functions ...

$(document).ready(function(){

    var timeout_id = 0;
    var timeout_id = setInterval( function(){next()}, 5000)
})

    var originalAddClassMethod = jQuery.fn.addClass;
        $.fn.addClass = function(){
        var result = originalAddClassMethod.apply( this, arguments );
        jQuery(this).trigger('cssClassChanged');
        return result;
    }


    $('.customers_comment li').bind('cssClassChanged', function(){ 
        var id = $('.customers_comment li.act').attr('data-id');
        $('.customers_comment .dots a[href="#'+id+'"]').addClass(act).siblings('a').removeClass(act) 
        clearTimeout(timeout_id);
     })

我在这里上传主题

http://demo.eagle-design.ir/amin/#sec4

4

2 回答 2

1

您已在 dom 就绪处理程序中声明timeout_id为局部变量，因此在该 dom 就绪处理程序之外无法访问它，因此如果您想在不同范围内使用它，请在 dom 就绪处理程序之外声明它

var timeout_id;
$(document).ready(function () {

    timeout_id = setInterval(function () {
        next()
    }, 5000)
})

我建议将事件注册代码也移动到 dom 就绪句柄

$(document).ready(function () {
    var timeout_id = setInterval(function () {
        next()
    }, 5000);

    $('.customers_comment li').bind('cssClassChanged', function () {
        var id = $('.customers_comment li.act').attr('data-id');
        $('.customers_comment .dots a[href="#' + id + '"]').addClass(act).siblings('a').removeClass(act)
        clearTimeout(timeout_id);
    });
});

var originalAddClassMethod = jQuery.fn.addClass;
$.fn.addClass = function () {
    var result = originalAddClassMethod.apply(this, arguments);
    jQuery(this).trigger('cssClassChanged');
    return result;
}
于 2015-06-17T11:47:42.250 回答
0

timeout_idclearTimeout.在您调用Try 的地方未定义：

$(document).ready(function(){

    var timeout_id = 0;
    var timeout_id = setInterval( function(){next()}, 5000)

   var originalAddClassMethod = jQuery.fn.addClass;
        $.fn.addClass = function(){
        var result = originalAddClassMethod.apply( this, arguments );
        jQuery(this).trigger('cssClassChanged');
        return result;
    }


    $('.customers_comment li').bind('cssClassChanged', function(){ 
        var id = $('.customers_comment li.act').attr('data-id');
        $('.customers_comment .dots a[href="#'+id+'"]').addClass(act).siblings('a').removeClass(act) 
        clearTimeout(timeout_id);
     })
})
于 2015-06-17T11:50:17.747 回答