Question

我有一个名为autoSlide的函数，可以激活div的边距，将图像精灵显示到img标记中

function marginCalc(){
        var getmargin = parseInt($("#scrollimage").css('margin-left'));
        var usemargin =  -1350 ;
        var increment= getmargin+usemargin;
        if(increment <= -2750)
        {
        $("#scrollimage").animate({'margin-left':0},1000);
        }
        else{
        $('#scrollimage').animate({'margin-left': ++increment},1000);
        }
    }
function autoSlide(){
        setInterval(function() {
        marginCalc();
        }, 5000);
        }

单击div时，会重置边距以显示相应的图像

   $(document).ready(function(){

        $("#Image1").click(function(){
                $("#scrollimage").animate({'margin-left':0});
        });

        $("#Image2").click(function(){
                $("#scrollimage").animate({'margin-left':-1350});
        });

       autoSlide();

       });

我的问题是当点击div时它会回滚到相应的图像但是autoSlide功能继续运行，我想在点击div后让用户看到图像后停止3秒，然后再继续运行那里的autoSlide函数。

如何实现这一目标。提前致谢

Answer 1

超时的简单演示：
DEMO
试试这个：

$(document).ready(function(){

        $("#Image1").click(function(){
                $("#scrollimage").animate({'margin-left':0});
        });

        $("#Image2").click(function(){
                $("#scrollimage").animate({'margin-left':-1350});
        });

    var timeout;
    if(timeout) {
      clearTimeout(timeout);
      timeout = null;
    }

    timeout = setTimeout( autoSlide, 3000);


       });

Answer 2

答案是这个

    function marginCalc(){
            var getmargin = parseInt($("#scrollimage").css('margin-left'));
            var usemargin =  -1350 ;
            var increment= getmargin+usemargin;
            if(increment <= -2750)
            {
            $("#scrollimage").animate({'margin-left':0},1000);
            }
            else{
            $('#scrollimage').animate({'margin-left': ++increment},1000);
            }
        }


$(document).ready(function(){
        var autoslide = setInterval(marginCalc,5000);

        $("#Image1").click(function(){
                 clearInterval(autoSlide);
                $("#scrollimage").animate({'margin-left':0}).delay(3000);
                 autoslide = setInterval(marginCalc,5000);
        });

        $("#Image2").click(function(){
                clearInterval(autoSlide);
                $("#scrollimage").animate({'margin-left':-1350}).delay(3000);
                autoslide = setInterval(marginCalc,5000);
        });

       });

如何在点击div时为正在运行的函数添加延迟

2 个答案: