0

私は単純な画像スライダーを書いていますが、私の問題は、スライダーの終わりに達すると停止することです。私が必要とするのは、スライダーの最後に、スライダーの最初の画像を表示し、onKeyup イベントが発生するまでスライドし続けることです...

どんな助けでも大歓迎です:)

ここに私のコードがあります:

    var second_array = new Array();
function LoadImageList() {
    var s = "";
    var ia = 0;
    var std = "";
    var etd = "";
    var paths = FSO.OpenTextFile("bin\\Tlist.txt")

    while (!paths.AtEndOfStream) {
    var tot = ia++;
    content = paths.ReadLine();
    var newNameN = content.split(";");
    var curID = "t"+tot
    var forID = "t"+parseFloat(tot+1)
    var bacID = "t"+parseFloat(tot-1)

        second_array[tot] = "<td nowrap style=\"padding:10px;\"><font style=\"display:none;\">"+newNameN[0]+"</font><img src=\""+newNameN[2]+"\\folderS.jpg\" id=\""+curID+"\" tabindex=\""+tot+"\" style=\"width:217px; height:322px; border:solid 5px silver; border-radius:10px; box-shadow: 0 0 15px #fff; cursor: pointer;\" onMouseOver=\"this.style.border='solid 5px red';\" onMouseOut=\"this.style.border='solid 5px silver';\"></td>";

    }
    second_array.sort();
        var tempList = second_array.join("");
            thumb.innerHTML = "<table cellpadding=0 cellspacing=0 border=0><tr>"+tempList+"</tr></table>";
}

var defaultStep=1;
var step=defaultStep;
var timerLeft;
var timerRight;

function scrollDivLeft(id) {
    document.getElementById(id).scrollLeft+=Math.round(step*100);
    timerLeft=setTimeout("scrollDivLeft('"+id+"')",1);
} 

function scrollDivRight(id) {
    document.getElementById(id).scrollLeft-=Math.round(step*100);
    timerRight=setTimeout("scrollDivRight('"+id+"')",1);
} 

document.body.addEventListener('keydown', function (e) {
if (e.keyCode=='37') {
    clearTimeout(timerRight);
    scrollDivRight("thumb");
    }
    else if (e.keyCode=='39') {
    clearTimeout(timerLeft);
    scrollDivLeft("thumb");
    }
})

document.body.addEventListener('keyup', function (e) {
    if (e.keyCode=='37') {
    clearTimeout(timerRight);
    }
    else if (e.keyCode=='39') {
    clearTimeout(timerLeft);
    }
})
4

1 に答える 1

0

スクロール可能な画像のリストが次のように設定されていて、ユーザーが最後のアイテムを表示しているとします。

<li>Img 1</li> (out of view)
<li>Img 2</li> (out of view)
<li>Img 3</li> (out of view)
<li>Img 4</li> (Visible item)

この時点で、スライダーをどのように機能させたいかに応じて、いくつかのオプションがあります。最も簡単な方法は、ユーザーが次にクリックしたときに最初の画像に戻ることです。これにより、一種の「連続スクロール」が得られますが、どのアイテムが最初でどれが最後かは非常に明確になります。

別のオプションは、最初の画像をリストの最後に追加することです。その場合、ユーザーが最後の画像を表示しているとき、リストは実際には次のようになります。

<li>Img 2</li> (out of view)
<li>Img 3</li> (out of view)
<li>Img 4</li> (Visible item)
<li>Img 1</li> (Clone of first item appended to end of list, out of view)

スクロール ロジックとは別に、リスト アイテムを複製するロジックを処理できます。これは、一般的に使用される jQuery スライダー プラグインがそれを処理するおおよその方法です。

疑似コードでは、次のようなものがあるかもしれません:

    function scrollDivRight(id) {
        if ( current item position is 2nd to last ) {
            Clone & remove item1
            Append item1 to end
        }        
        scrolling logic
    }

詳細については、jCarouselのソース コードを参照することをお勧めします。

サンプルの Tlist.txt ファイルを含めると、コードをテストしてより具体的な回答を提供しやすくなります。

于 2012-11-14T16:08:39.167 に答える