0

サイトでカルーセルを実行するスクリプトがあります。これは、作業を行っているスクリプトです。そこに再生/一時停止ボタンを追加する必要があります。ユーザー @gskartwii は、Javascript - How to add pause button in carousel? で私を助けてくれました。ボタンを追加します。そして、デザインに合わせてコードを修正しました。

問題は、一時停止が正常に機能していることです。しかし、一度一時停止すると、もう一度クリックしても再生は再開されません! 私は Javascript の専門家ではないので、何を変更すればよいかわかりません。:/

誰かがこれについて私を助けてくれますか。

そして、これはスクリプトです：

 <?php
$speed = 500;//miliseconds
?>


<script type="text/javascript">
var paused=false;
var timeoutID;

homeTileCount = 1;
$$('.home-tile-container img').each(function(e){
    $(e).writeAttribute('id','home-tile-' + homeTileCount);
    $(e).addClassName('home-tile');
    homeTileCount++;
});

homeTileCount--;

var homeTileRemote = $$('.home-tile-remote')[0];

//play / pause button start
homeTileRemote.insert('<div id="home-title-remote-10" class="overflow"><a href="#" onclick="if(!paused){paused=true} else{paused=false}">| |</a></div>');
//play/pause button end

for (i=homeTileCount;i>=1;i--){
    homeTileRemote.insert('<div id="home-tile-remote-'+i+'" class="overflow"><a href="#" onclick="switchTile('+i+');return false">'+i+'</a></div>');
}

function switchTile(n)
{
    if(!paused){
    //console.log(n);
    clearTimeout(timeoutID);
    $$('.home-tile-container img').each(function(e){
        e.removeClassName('home-tile-active');
    });

    $$('.home-tile-remote > div').each(function(e){
        e.removeClassName('home-tile-remote-active');
    });

    $('home-tile-remote-'+n).addClassName('home-tile-remote-active');
    $('home-tile-'+n).addClassName('home-tile-active');
    next = n+1;
    if (next > homeTileCount)
        next = 1;
    timeoutID = setTimeout('switchTile('+next+')', <?=$speed?>);}
}

switchTile(1);
setTimeout('switchTile(2)', <?=$speed?>);
</script>
4

1 に答える 1

0

ボタンがある場合は、あなたが尋ねた他の質問から参照してください：

<button type="button" onclick="paused=true;">Pause</button>

次に、再生ボタンは

<button type="button" onclick="paused=false;">Play</button>

于 2012-10-18T04:27:41.600 に答える