首頁  >  文章  >  web前端  >  如何使用 JavaScript/jQuery 實現無縫無限循環圖像滑桿?

如何使用 JavaScript/jQuery 實現無縫無限循環圖像滑桿?

Susan Sarandon
Susan Sarandon原創
2024-11-01 16:45:02873瀏覽

How to Achieve a Seamless Infinity Loop Image Slider Using JavaScript/jQuery?

使用 JavaScript/jQuery的無限循環滑桿設計概念

要建立具有最佳程式碼可讀性、可維護性和可重複使用性的無限循環影像滑桿,請考慮以下藍圖:

無限循環效果的圖像排列

要實現無限循環的幻覺,請實現以下兩種方法之一:

  • 更改 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中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn