2011-06-21 3 views
0

を再起動します.clickイベントを開始するためのループを中断します下の小さな四角。 'これまではすべてが良いです。はその後、私は私が何を意味するか教えてあげるループ

今、私は本当に、私はこのコードを使用永遠色付きのボックスループを作りたい:

$(document).ready(function runIt(){ 
    $('#slider').animate({marginLeft: "0"}, 500).delay(5000); 
    $('#slider').animate({marginLeft: "-900"}, 500).delay(5000); 
    $('#slider').animate({marginLeft: "-1800"}, 500).delay(5000); 
    runIt; 
}); 

それは良い作品が、私はもう手動でボックス間を切り替えることはできません。

コードのこれら2枚混在することが可能であった場合、私は思っていた:私はその.clickイベントをした、色の正方形の1を押して、ループを再起動するまで

$('#slider').animate({marginLeft: "0"}, 500).delay(5000); 
    $('#slider').animate({marginLeft: "-900"}, 500).delay(5000); 
    $('#slider').animate({marginLeft: "-1800"}, 500).delay(5000); 
    runIt; 
}); 

    $('a#but1').click(function(){ 
    $('#slider').animate({marginLeft: "0"}, 500) 
    }); 

    $('a#but2').click(function(){ 
    $('#slider').animate({marginLeft: "-900"}, 500) 
    }); 

    $('a#but3').click(function(){ 
    $('#slider').animate({marginLeft: "-1800"}, 500) 
    }); 
}); 

はボックスループを作るに。

編集:すべての.clickイベントに.stop()を追加しようとしましたが、機能しません。

EDIT2(ほとんど解決済み):少し検索して、いくつかの運があって、このプラグインを見つけました:http://flesler.blogspot.com/2007/10/jqueryscrollto.htmlこれも私を助けることができると思います。今私のコードをプラグインのみ、そのサイクルを使用して

は次のとおりです。
$('#slider').cycle({fx: 'scrollLeft', 
       speed: 500, 
       timeout: 5000}); 

    $('a#but1').click(function() { 
     $('#slider').cycle(0); 
     return false; 
    }); 

    $('a#but2').click(function() { 
     $('#slider').cycle(1); 
     return false; 
    }); 

    $('a#but3').click(function() { 
     $('#slider').cycle(2); 
     return false; 
    }); 


}); 

は、悲しいことに、このプラグインはtroughtすべてのフレームをスクロールしませんが、現在と次が来るように。 スライドショーが1番目のボックスにあるときに3番目の四角を押すと、アニメーション中に2番目のボックスは考慮されません。期待しているのは、サイクルプラグインのドキュメントを読んだので、そうするコマンドが見つからなかったからです。

答えて

0

jquery slideshow(http://jquery.malsup.com/cycle/)などのトランジションに対処する方が良いかもしれません。

このようなループでは、イベント管理が行われない可能性があります。また、クリックイベントが発生しないような理由が原因かもしれません。彼らはループが処理される前に完了するのを待っているかもしれません。実際には無限ループを作成し、あなたのイベントは待っています。

関連する問題