1

特定のディレクトリから画像を回転させているこのスクリプトを Magento で見つけました。これはうまくいっています。しかし、「1-6」の後に「一時停止」ボタンを追加する必要があります。私はJavaScriptの専門家ではないので、これを行う方法がわかりません。誰かがこれで私を助けてくれますか?

コード：

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


<script type="text/javascript">
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];
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)
{
    //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

1

多分これ：

<?php
$speed = 5000;//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];
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>
<button type="button" onclick="paused=true;">Pause</button>
于 2012-10-17T06:22:06.827 に答える