javascript - Javascript スライド イメージ ギャラリー - jQuery なし

Question

純粋な JS 画像スライダーを作成するためのヒントはありますか? 各画像の後に一時停止し、すべての画像を通過した後に再起動することを検討しています。私が見つけることができるのはjQueryプラグインだけで、JSのみでこれを行うつもりです。

Answer 1

私はこのようなものに行きます：

var sliderTool = {
    _totalItems : 0,
    _visibleItems : 6,
    _currentOffset : 0,
    _timeout : null,
    next : function(){
        ...
    },
    prev : function(){
        ...
    },
    play : function(){
        ...
    },
    pause : function(){
        ...
    }
};

ベースとして。

タイムアウトを設定するたびに、それを _timeout フィールドに保存して、必要なときにいつでも clearTimeout(sliderTool._timeout) できるようにします。next と prev には、アニメーションまたは単純な画像置換のみを含めることができます。アニメーションとスライド間の間隔に別のタイムアウトを追加できます。

「add()」メソッドをsliderToolに追加し、window.loadまたは「body onload」ですべての画像を追加してから、start()メソッドを実行できます。ページが読み込まれた後に画像を動的に追加することもできます

オートローディングと基本設定のために init() を追加するかもしれません。

繰り返しますが、これは考えられる解決策の基本的なドラフトです。実行すると、おそらくより具体的な質問に出くわすでしょう。全体として、アプローチとして、一般的なアドバイスを求める前に、まず何らかの解決策を考え出すことをお勧めします;)