0

自動で動作する（ボタンなし）シンプルなスライドショーを作りたいです。画像は下から上にスライドする必要があります。コードの後のことを説明しました。

HTML:

<ul id="imgSlider1">
    There are images here in <li> tags
</ul>

JavaScript: 

window.onload = initAll;

function initAll(){
    var img = document.getElementById("imgSlider1");

    if((parseInt(window.getComputedStyle(img).top)) == -1160){
    img.style.top = 290 +"px";}

    var i = parseInt(window.getComputedStyle(img).top);   
    var j = i-290;

    slideIt(i, j, img);
}

function slideIt(initTop, finalTop, target){
    if(initTop == finalTop){
    window.setTimeout(initAll, 10000);
    }

    target.style.top = (initTop - 1)+"px";

    var presentTop = parseInt(window.getComputedStyle(target).top);
    window.setTimeout(function(){ slideIt(presentTop, finalTop, this)},20)
}

私がここでやろうとしたこと: 「initAll()」関数はリストの「トップ」を取得し、「i」にその値が割り当てられます。変数「j」には「i-290」が割り当てられます (290px が各画像の高さであるため)。ここで、「i」、「j」、およびターゲット オブジェクト (ここでは画像のリスト) が次の関数「slideIt()」に渡されます。「slideIt()」関数は、ターゲット オブジェクトの「top」から毎回「1px」を減算し、「top」が「finalTop」(「j」に割り当てられた値)と等しくなるまで何度も呼び出されます。この条件が満たされると、10 秒後に「initAll」関数がコールバックされます。

では、なぜこのコードが機能しないのでしょうか?

コンソールに「未定義のプロパティ 'top' を設定できません」と表示される

4

2 に答える 2

1

以下に説明するアイデアは、あなたが望むものを達成するのに役立つと信じています.
(この作業デモも参照してください。)

主なアイデアは、事前に定義された「チェックポイント」に到達するまで、一度に 1 ピクセルずつスクロールすることです。<ul>チェックポイントは、スライダー コンテナー (つまり、この場合の要素)に対する画像のオフセットです。

function slideIt(slider, ...) {
    ...
    setTimeout(function() {
        slider.scrollTop += 1;
        slideIt(slider, ...);
    }, 20);
    ...
}

チェックポイントに到達したら、次のチェックポイント (スライダー コンテナーに対する次の画像のオフセット) を決定し、スクロール プロセスを続行します。

...
/* Reached new image ("check-point") */
nextIdx++;
nextTop = (nextIdx < imgs.length) 
    ? imgs[nextIdx].offsetTop - slider.offsetTop     // <-- next check-point
    : -1;     // <-- last image reached, just scroll to the bottom    
setTimeout(function() {
    slider.scrollTop += 1;
    slideIt(slider, nextTop, ...);
}, newImgDelay);     // <-- stay longer (e.g. 10s) 
                     //     to let the user see the new image
...
于 2013-05-12T15:59:24.773 に答える