1

divのマージンをアニメーション化して画像のスプライトをimgタグに表示するautoSlideという関数があります

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 関数を実行し続けます。そこから。

これを達成する方法。前もって感謝します

4

2 に答える 2

0

答えはこれ

    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);
        });

       });
于 2012-12-12T04:03:15.590 に答える
0

タイムアウトの簡単なデモ:
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);


       });
于 2012-12-11T16:11:04.223 に答える