Infinity Loop Slider Concepts

この記事では、Infinity-Image-Loop- を構築するための、読みやすさ、コードの再利用性、優(yōu)れたコーディング方法などのベスト プラクティスについて説明します。 JavaScript/jQueryを使用したWebサイトのスライダー。焦點は、無限ループ スライダーの錯覚を作成するために畫像を配置する方法にあります。

無限ループ スライダーの実裝

無限畫像スライダーを作成する簡単な方法の 1 つは次のとおりです。ループ內でスライドさせる「n」個の畫像があり、最初の畫像が n 番目の畫像の後に続き、その逆も同様です。最初と最後のイメージのクローンを作成し、次の操作を実行します。

• 最初のイメージの前に最後のイメージのクローンを追加します。
• 最初のイメージのクローンを後ろに追加します。最後の畫像。

畫像の數に関係なく、挿入する必要があるのは最大 2 つのクローン項目だけです。

すべての畫像が幅 100 ピクセルで、オーバーフローのあるコンテナ內に表示されると仮定します。 hidden、display: inline-block、white-space: nowrap を使用すると、畫像を保持するコンテナを簡単に一列に整列させることができます。

n = 4 の場合、DOM 構造は次のようになります。

offset(px)     0       100     200     300     400     500
images         |   4c   |   1   |   2   |   3   |   4   |   1c
                                                   
/*                 ^^                                       ^^
       [ Clone of the last image ]              [ Clone of the 1st image ]
*/

最初、コンテナは左: -100px に配置され、最初の畫像が表示されます。畫像を切り替えるには、最初に選択した CSS プロパティに JavaScript アニメーションを適用します。

• スライダーが 4 番目の畫像にある場合、畫像 1c に移動すると、畫像 4 から 1c へのアニメーションが行われます。アニメーションが完了したら、最初の畫像の実際のオフセットにスライダー ラッパーを即座に再配置します (例: 左に設定: コンテナーに対して -100px)。
• 同様に、スライダーが最初の要素に配置されている場合、畫像 1 から 4c まで前のアニメーションを実行し、コンテナを 4 番目の畫像オフセット (左: コンテナまで -400 ピクセル) に移動するだけで、前の畫像を表示できます。

スライド ループの調整

付屬のフィドルはこの効果を示しています。以下に使用する基本的な JavaScript/jQuery コードを示します。

$(function() {
 
  var gallery = $('#gallery ul'),
      items   = gallery.find('li'),
      len     = items.length,
      current = 1,  /* the item we're currently looking */
      
      first   = items.filter(':first'),
      last    = items.filter(':last'),
      
      triggers = $('button');
  
  /* 1. Cloning first and last item */
  first.before(last.clone(true)); 
  last.after(first.clone(true)); 
  
  /* 2. Set button handlers */
  triggers.on('click', function() {

    var cycle, delta;
    
    if (gallery.is(':not(:animated)')) {
     
        cycle = false;
        delta = (this.id === "prev")? -1 : 1;
        /* in the example buttons have id "prev" or "next" */  
    
        gallery.animate({ left: "+=" + (-100 * delta) }, function() {
      
            current += delta;
       
            /** 
             * we're cycling the slider when the the value of "current" 
             * variable (after increment/decrement) is 0 or when it exceeds
             * the initial gallery length
             */          
            cycle = (current === 0 || current > len);
       
            if (cycle) {
                /* we switched from image 1 to 4-cloned or 
                   from image 4 to 1-cloned */
                current = (current === 0)? len : 1; 
                gallery.css({left:  -100 * current });
            }
        });   
     }
    
  });
});

結論

このソリューションは比較的簡単で効率的であり、必要な追加の DOM 挿入操作は 2 つだけであり、他のソリューションと比較してシンプルなループ管理ロジックが必要です。 -looping slider.

別のアプローチが存在する可能性もありますが、この方法は無限ループ スライダーを作成するための実用的で効果的なソリューションを提供します。

以上がJavaScript/jQuery を使用して無限畫像ループ スライダーを作成するにはどうすればよいですか?の詳細內容です。詳細については、PHP 中國語 Web サイトの他の関連記事を參照してください。