Question

我在下面的代码中的查询是---我在document.ready中使用了一个函数滑块。现在我的查询是当我点击'dot1'时，document.ready中的函数滑块停止执行直到调用该函数再次。怎么做到这一点？任何人都可以帮助我..... 提前感谢你。这是我的代码：

    var imgValue;
    var value;
    var flag;

    function ClickEvent() {
        $('span[id^="dot"]').click(function (event) {
            event.stopPropagation();
            var Clickid = $(event.target)[0].id;
            $('.image1').css('display', 'none');
            $('.innerdiv').css('display', 'none');

            switch (Clickid) {
                case 'dot1':
                    {
                        debugger;
                        SliderTimer = null;
                        clearInterval(SliderTimer);
                        flag = 0;
                        value = 1;
                        ImageLoad(value);

                        //setTimeout(SlideImage(), 150000);
                        //alert("dot1 Clicked");                         
                        break;
                    }
                case 'dot2':
                    {
                        //alert("dot2 Clciked");
                        //setTimeout(SlideImage(), 5000);
                        value = 2;
                        ImageLoad(value);
                        //setTimeout(SlideImage(), 150000);
                        //alert("dot2 Clicked");
                        break;
                    }
                case 'dot3':
                    {
                        //alert("dot3 Clicked");
                        //setTimeout(SlideImage(), 5000);
                        value = 3;
                        ImageLoad(value);
                        //setTimeout(SlideImage(), 150000);
                        //alert("dot3 Clicked");
                        break;
                    }
            }
        });
    }

    function ImageLoad(count) {

        $('* span').css('background-color', '#ccc');
        $('.Dots #dot' + count).delay(4500).css('background-color', "Black");


        $('.image #img' + count).show('fade', { direction: 'right' }, 1000);

        $('.image #indiv' + count).delay(1500).show('fade', 1000);
        $('.image #indiv' + count).delay(2500).hide('fade', { direction: 'left' }, 1000);

        $('.image #img' + count).delay(4500).hide('fade', { direction: 'left' }, 1000);

    }

    function LoadPage() {
        $('.image #img1').show('fade', 1000);
        $('* span').css('background-color', '#ccc');
        $('.Dots #dot1').css('background-color', 'Black');
    }

    $(document).ready(function Slider() {

        var sc = $('.image img').size();

        LoadPage();
        value = 1;

        setInterval(SliderTimer, 5000);

        ClickEvent();

    });

    var SliderTimer = function SliderImage() {
        var sc = $('.image img').size();

        ImageLoad(value);

        if (value == sc) {
           value = 1;
        }
        else {
           value += 1;
        }            
    }
</script>

Answer 1

使用clearInterval：

var timer = setInterval(function() { ... }, 666); 

...

$('#butt').click(function(){
    clearInterval(timer);
});

编辑：这是你的代码的样子：

var sliderTimer;

function ClickEvent() {
   ...

        switch (Clickid) {
            case 'dot1':
                {
                    clearInterval(sliderTimer);

    ...
}

...

$(document).ready(function Slider() {
    ...
    sliderTimer = setInterval(SliderTimer, 5000);
    ClickEvent();
});

function SliderImage() {
    var sc = $('.image img').size();
    ImageLoad(value);
    if (value == sc) {
       value = 1;
    }
    else {
       value += 1;
    }            
}

如何在jquery中停止执行document.ready

1 个答案: