JavaScript/jQueryを使用してシームレスな無限ループ画像スライダーを実現するにはどうすればよいですか?

JavaScript/jQuery を使用した無限ループ スライダーの設計コンセプト

最適なコードの可読性、保守性、再利用性を備えた無限ループ イメージ スライダーを作成するには、次のブループリントを検討してください:

無限ループ効果の画像配置

無限ループの錯覚を実現するには、次の 2 つのアプローチのいずれかを実装します。

• Z インデックスの変更: 次または前の画像が表示されるように、各画像の Z インデックスを調整します。
• DOM 位置の変更: 画像を移動しますDOM 内でスクロールまたはループの外観を作成します。

シームレスなループのためのイメージの複製

無限ループを作成するには、最初と最後のイメージを複製します。シーケンスで。次に、スクロール中に次のようにします。

• 画像 n から画像 1 に遷移する場合、アニメーションが完了した直後にコンテナを実際の最初の画像のオフセットに移動します。
• 画像 1 から画像 1 に遷移する場合画像 n の場合、アニメーションが完了した直後にコンテナを実際の n 番目の画像のオフセットに移動します。

コード例

次の 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 });
            }
        });   
     }
    
  });
});

以上がJavaScript/jQueryを使用してシームレスな無限ループ画像スライダーを実現するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。