0

jquery を使用してイメージ ループを作成しましたが、正常に動作します。これが私のコードです。

$(document).ready(function(){
    $('.images').hide();    
    $('#image1').show('slide', {direction: 'right'}, 500);
    $('#image1').delay(2000).hide('slide', {direction: 'left'}, 500);
    var sc = $('#image img').size();
    var count = 2;
    setInterval(function(){
        $('#image'+count).show('slide', {direction: 'right'}, 500);
        $('#image'+count).delay(2000).hide('slide', {direction: 'left'}, 500);
        if(count == sc){
            count = 1;
        }else{
            count = count + 1;
        }
    }, 3000);

    $('.name').click(function(){
        var name = $(this).attr('id');
        name = name.replace('name', '');
        count = name;
    });
});

これがhtmlコードです。

                    <div id="image">
                        <img class="images" id="image1" alt="Image loop" src="image1.jpg" width="550px" height="400px"/>
                        <img class="images" id="image2" alt="Image loop" src="image2.jpg" width="550px" height="400px"/>
                        <img class="images" id="image3" alt="Image loop" src="image3.jpg" width="550px" height="400px"/>
                        <img class="images" id="image4" alt="Image loop" src="image4.jpg" width="550px" height="400px"/>
                        <img class="images" id="image5" alt="Image loop" src="image5.jpg" width="550px" height="400px"/>
                    </div>
                    <div id="name">
                        <div class="name" id="name1">
                            <img src="image1.jpg" width="80px" height="80px"/>
                        </div>
                        <div class="name" id="name2">
                            <img src="image2.jpg" width="80px" height="80px"/>
                        </div>
                        <div class="name" id="name3">
                            <img src="image3.jpg" width="80px" height="80px"/>
                        </div>
                        <div class="name" id="name4">
                            <img src="image4.jpg" width="80px" height="80px"/>
                        </div>
                        <div class="name" id="name5">
                            <img src="image5.jpg" width="80px" height="80px"/>
                        </div>

css は右側の名前セットを制御します。私の考えは、右側の小さな画像をクリックして、ユーザーが選択した画像をすぐに切り替えることです。 ここに画像の説明を入力 少し効いているようです。setInterval がまだ実行中であり、ループが台無しになっています。どうすればこれに適切に対処できますか？これがjsfiddleリンクです。ありがとう！

4

3 に答える 3

2

setIntervalで実行を停止できますclearInterval。具体的には、 の戻り値で呼び出す必要がありますsetInterval。

var interval = setInterval(...
clearInterval(interval);

編集:これはあなたの問題には直接当てはまりません。できることは、 へのコールバックを行う別の関数を作成することだけですsetInterval。次に、クリック イベントへのコールバックの一部としてその関数も呼び出します。間隔をクリアする (アニメーションを停止する) かどうかは、あなた次第です。

于 2013-01-23T00:26:25.467 に答える
1

この問題は、 count に name を割り当てるときに、クリック ハンドラ内で count のタイプを数値から文字列に変更したために発生します。parseInt を含めるようにコードを編集しました。

    $('.name').click(function(){
    var name = $(this).attr('id');
    name = name.replace('name', '');
    count = parseInt(name, 10);  
});
于 2013-01-23T01:34:40.930 に答える
1

これは簡単な作業例です

var interval;
var times;

function doSomething() {
    if (times == 100) {
        // Unset the interval:
        clearInterval(interval);
    } else {
        alert("Hey");
        times++;
    }
}

// Initialize interval:
interval = setInterval(doSomething, 1000);
于 2013-01-23T00:33:33.483 に答える