2

これが私のコードです。「よく」効きます。しかし、しばらくループすると、ページがクラッシュします。また、ボタンがクリックされたときにループを停止する方法も考えられません。何か案は？

クラッシュするため、jsfiddle のデモを提供できません。

JavaScript:

$(document).ready(function () {
    var stop = false;

    function ivSlider($element, $continue) {
        var current = $element.find('.current');
        var next = current.next();
        if (next.length == 0) next = $element.find(">:first-child");
        setInterval(function () {
            current.removeClass('current');
            next.addClass('current');
            if ($continue === true) ivSlider($element, true);
        }, 4000);
    }

    ivSlider($('.slider'), true);

});

CSS:

.slider li {
    display: none;
    float: left;
    padding-right: 10px;
}

.current {
    display: block!important;
}

HTML:

<ul class="slider">
    <li class="current">Slide 1</li>
    <li>Slide 2</li>
</ul>
4

2 に答える 2

2

に変更setIntervalしsetTimeoutます。今のように、あなたはフォーク爆弾を持っています. ループの停止に関しては、 に設定$continueすることはありませんfalse。

$(document).ready(function () {
    var stop = false;
    var timeout = null;

    function ivSlider($element, $continue) {
        var current = $element.find('.current');
        var next = current.next();
        if (next.length == 0) {
            next = $element.find(">:first-child");
        }
        timeout = setTimeout(function () {
            current.removeClass('current');
            next.addClass('current');
            if ($continue === true) {
                ivSlider($element, true);
            }
        }, 4000);
    }

    ivSlider($('.slider'), true);
    $('.stop-button').click(function () {
        if (timeout) {
            clearTimeout(timeout);
        }
    });
});
于 2013-08-29T08:01:05.900 に答える
1

clearIntervalを使用して停止できます。ここで、 @TJ Crowder の回答を引用したいと思います。

setInterval繰り返しタイマーを設定します。clearInterval起動を停止するために渡すことができるハンドルを返します。

あなたはこのように試すことができます

1) ブール値のままにしますstop。

2) アニメーションには別の方法があります。

   function animation() {
       current.removeClass('current');
       next.addClass('current');
       if ($continue === true) ivSlider($element, true);
   }

3)パラメータを持つ別の関数で囲み、に変数を設定しますsetInterval。

function yourFunc(stop) {
    if (stop) {
       interval = setInterval(animation, 4000);
    }
    else {
      clearInterval(interval); // STOP the animation loop
    }
}

4) ボタンのクリック時に、 as パラメータを渡してfalseアニメーションを停止します。

 $('button').click(function () {
     yourFunc(false);
 }

コメントからの更新:

 $(document).ready(function () {
     function animation() {
         var current = $('.slider').find('.current');
         var next = current.next();
         if (next.length == 0) next = $('.slider').find(">:first-child");
         current.removeClass('current');
         next.addClass('current');
         ivSlider($('.slider'), true);
     }

     function yourFunc(stop) {
         if (stop) {
             interval = setInterval(animation, 1000);
         } else {
             alert('Im going to be stopped')
             clearInterval(interval); // STOP the animation loop
         }
     }

     $('button').on('click', function () {
         yourFunc(false);
     });

     yourFunc(true);
 });

このJSFiddleをチェックしてください

于 2013-08-29T08:04:31.243 に答える