0

我在下面的代码中的查询是 --- 我在 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>
4

1 回答 1

5

使用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;
    }            
}
于 2013-05-31T12:17:20.467 回答