0

私はjavascriptとjqueryが初めてです

最初のスパン ID 1、スパン ID 2、スパン ID 3 などを表示する独自のスクリプトを作成し、ある種のループを作成して、毎秒新しいスパンを表示し、もう一方を閉じるようにしました。しかし、スパンアイテムの1つにマウスオーバーするとループが停止するようにします。私は試した

<span id="example_1" class="com_items">a</span>
<span id="example_2" class="com_items">b</span>
<span id="example_3" class="com_items">c</span>
<span id="example_4" class="com_items">d</span>
<span id="example_5" class="com_items">e</span>
<span id="example_6" class="com_items">f</span>
<script>
    function show_span(a){
            $('.com_items_but').css('background-color','#E84700');
        $('#example_but_'+a).css('background-color','#017095');
        $('.com_items').hide();
        $('#example_'+a).show();
}
function run_commer(){
    setTimeout(function() { show_span(1);}, 0); 
    setTimeout(function() { show_span(2);}, 1000); 
    setTimeout(function() { show_span(3);}, 2000); 
    setTimeout(function() { show_span(4);}, 3000); 
    setTimeout(function() { show_span(5);}, 4000); 
    setTimeout(function() { show_span(6);}, 5000); 
    setTimeout(run_commer, 6000);
}
run_commer();   
</script>

これは私が試したものです：

function stop_hover(){
var stop_h = 1; 
}
function run_commer(){
if(stop_h != 1){
    setTimeout(function() { show_span(1);}, 0); 
    setTimeout(function() { show_span(2);}, 1000); 
    setTimeout(function() { show_span(3);}, 2000); 
    setTimeout(function() { show_span(4);}, 3000); 
    setTimeout(function() { show_span(5);}, 4000); 
    setTimeout(function() { show_span(6);}, 5000); 
    setTimeout(run_commer, 6000);
    }
}

しかし、私は何か非常に間違ったことをしていることがわかります

4

1 に答える 1

5

setTimeout を変数に割り当てる必要があり、それをキャンセルできます。

var timer = setTimeout(function() { 
        // Do something here...  
 }, 1000);

clearTimeout(timer);  //This cancels the first timer
于 2013-05-22T13:51:56.660 に答える