無限循環(huán)滑塊概念

本文討論了構(gòu)建無限圖像循環(huán)的最佳實(shí)踐，例如可讀性、代碼可重用性和良好的編碼實(shí)踐-使用 JavaScript/jQuery 的網(wǎng)站滑塊。重點(diǎn)是如何排列圖片以創(chuàng)建無限循環(huán)滑塊的錯(cuò)覺。

實(shí)現(xiàn)無限循環(huán)滑塊

創(chuàng)建無限圖像滑塊的一種簡單方法如下：假設(shè)您有“n”張圖像要循環(huán)滑動，第一個(gè)圖像位于第 n 個(gè)圖像之后，反之亦然。創(chuàng)建第一個(gè)和最后一個(gè)圖像的克隆，然后執(zhí)行以下操作：

• 將最后一個(gè)圖像的克隆附加在第一個(gè)圖像之前。
• 將第一個(gè)圖像的克隆附加在第一個(gè)圖像之后最后一張圖片。

無論圖片數(shù)量多少，最多只需要插入兩個(gè)克隆項(xiàng)目。

假設(shè)所有圖片都是 100px 寬，并顯示在一個(gè)有溢出的容器中： hide、display: inline-block、white-space: nowrap，容納圖像的容器可以輕松地排成一行。

對于 n = 4，DOM 結(jié)構(gòu)將如下所示：

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 ]
*/

最初，容器的位置為 left: -100px，允許顯示第一張圖像。要在圖像之間切換，請將 JavaScript 動畫應(yīng)用于您最初選擇的 CSS 屬性。

• 當(dāng)滑塊位于第 4 個(gè)圖像上時(shí)，移動到圖像 1c 涉及從圖像 4 到 1c 的動畫。動畫完成后，立即將滑塊包裝器重新定位在第一個(gè)圖像的實(shí)際偏移處（例如，將 left: -100px 設(shè)置為容器）。
• 同樣，當(dāng)滑塊位于第一個(gè)元素上時(shí)，執(zhí)行從圖像 1 到 4c 的上一個(gè)動畫并將容器移動到第 4 個(gè)圖像偏移（左：到容器的 -400px）足以顯示上一個(gè)圖像。

編排幻燈片循環(huá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 });
            }
        });   
     }
    
  });
});

結(jié)論

這個(gè)解決方案相對簡單高效，與非-循環(huán)滑塊。

雖然可能存在替代方法，但此方法為創(chuàng)建無限循環(huán)滑塊提供了實(shí)用且有效的解決方案。

以上是如何使用 JavaScript/jQuery 創(chuàng)建無限圖像循環(huán)滑塊？的詳細(xì)內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！