0

独自の動的スライドショー スクリプトを作成できると考えました。

function slider( container )
{
    var time = 1200;
    var width = 1000;
    var container = document.getElementById(container);
    var name = container.childNodes[1].className;
    var content = document.getElementsByClassName(name);

    var num = ( content.length * width );

    next = function()
    {           
        var px = container.style.marginLeft;
        var diff = Math.abs( px.replace( 'px', '' ) );
        var shifted = ( diff ) ? ( diff / width ) : '0';

        shifted++;

        if ( shifted == content.length )
        {
            shifted = 0;

            shift();
        }

        container.style.marginLeft = ( shifted == content.length ) ? '0' : '-' + ( shifted * width ) + 'px';
    }

    shift = function()
    {   
        for ( var i = 0; i < content.length; i++ )
        {
            var delay = ( ( i + 1 ) * time );

            setTimeout( next, delay );
        }
    }

    container.style.width = num + 'px';

    shift();
}

他のすべてのスライドショー コンテナで問題なく動作します。スライドは内部関数によって常に変更されます

関数 next()

この関数は、別の内部関数を使用してそれらをリセットするために、次のスライドとスライドがいつ終了するかを決定します

関数シフト()

異なる DIV コンテナーに対して異なる変数を使用して交換可能ですが、以下のように複数のインスタンスを実行しようとすると

スライダー(「要素」); スライダー(「要素2」);

最初はコードを実行し、すべての要素のスライドを循環しますが、最初のインスタンスのみが適切にリセットされ、最初から最後まで何度も「スライド」し続けます。複製インスタンスが shift() された後、複製に対して必要な next() は呼び出されません。

Slider() をマスター クラスの外に完全に移動して、ページから呼び出しても同じ結果になります。

おそらく1行の修正なので、いじってください。

http://jsfiddle.net/6LeUR/

4

1 に答える 1

1 
var content = document.getElementsByClassName(name);

…スライダー内だけでなく、ページ全体でそのクラスを持つすべての要素を検索します。次のように変更してみてください。

var content = container.getElementsByClassName(name);

varさらに、前にnext =とを追加しshift =ます。それを試してみてください。

于 2013-04-29T00:30:27.397 に答える