如何使用 Vanilla JavaScript 創建可拖動的輪播

簡介

網站的輪播或滑塊是在單個空間中顯示多個圖像或內容的有效方式。它鼓勵訪問者專注於重要的網站內容，同時通過節省屏幕空間來提高整體視覺吸引力。

注意： 源代碼在 GitHub 上。

開始使用

要在原生 JavaScript 中從頭開始構建可拖動輪播，我們需要使用一組獨特的鼠標事件，例如：

• mousedown ：當指針在元素內時按下鼠標按鈕時，mousedown 事件被觸發。
• mouseenter :當鼠標第一次移動到一個元素中時，mouseenter 事件被觸發。
• mouseleave ：當鼠標光標移出元素時，mouseleave 事件被觸發（這與 mouseenter 正好相反 )。
• mouseup :mouseup 當指針在元素內並釋放鼠標上的按鈕時觸發事件。
• mousemove :當光標在其中移動鼠標時，mousemove 事件被觸發。

讓我們從創建我們的 HTML 文件開始；基本上，我們會擁有盡可能多的卡片，其中包含我們想要的任何內容。為了避免粘貼超過 80 行的 HTML 代碼，我會從卡片中刪除內容，而是使用框：

<div class="slider-container">
    <div class="inner-slider">
        <div class="card"></div>
        <div class="card"></div>
        <div class="card"></div>
        <div class="card"></div>
        <div class="card"></div>
        <div class="card"></div>
        <div class="card"></div>
    </div>
</div>

讓我們在 slider-container 中添加一些基本樣式 , inner-slider 和 card ：

.card {
    height: 300px;
    width: 400px;
    border-radius: 5px;
}
.card:nth-child(odd) {
    background-color: blue;
}
.card:nth-child(even) {
    background-color: rgb(0, 183, 255);
}
.slider-container {
    width: 80%;
    height: 350px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    overflow: hidden;
}
.inner-slider {
    width: 150%;
    display: flex;
    gap: 10px;
    pointer-events: none;
    position: absolute;
    top: 0;
    left: 0;
}

注意： overflow: hidden; 已添加到 slider-container ，因此它隱藏了指定 width 之外的其他卡片 .我們還使用了 position: absolute; 在 top 旁邊 和 left 在 inner-slider ，所以我們可以使用 left 稍後使用 JavaScript 定位。

此時，您的頁面應如下所示：

使輪播可拖動

第一步是選擇滑塊元素、滑塊本身和滑塊容器。然後我們將設置三個變量，我們稍後會用到。

let sliderContainer = document.querySelector('.slider-container');
let innerSlider = document.querySelector('.inner-slider');

let pressed = false;
let startX;
let x;

如前所述，我們將大量使用鼠標eventListeners 處理各種操作。我們將主要將它們附加到父滑塊元素。

我們要觀察的第一個事件是 mousedown 事件，它與單擊類似但不完全相同。在這裡，我們將指定當用戶單擊滑塊容器周圍時我們想要發生的事情。

注意： 這不同於 click click 中的事件 發生完整的點擊操作後觸發事件；也就是說，當指針保持在同一元素內時，按下並釋放鼠標按鈕。而 mousedown 在第一次按下按鈕時執行。

sliderContainer.addEventListener('mousedown', () => {
    ...
})

為了證明 pressed 變量，我們之前初始化為 false , 按下時，我們將首先分配 true 給它。我們還將設置 startx x 中的偏移值 方向減去 innerSlider left 的偏移值 ，目前是 0 .我們可以通過嘗試註銷 startx 的值來了解這意味著什麼 .

我們還將設置 cursor 的樣式 為了更好的互動。這將被設置為 grabbing （要檢查它的作用，請嘗試在 slidercontainer 中單擊 )。

sliderContainer.addEventListener("mousedown", (e) => {
    pressed = true;
    startX = e.offsetX - innerSlider.offsetLeft;
    sliderContainer.style.cursor = "grabbing";
});

免費電子書：Git Essentials

查看我們的 Git 學習實踐指南，其中包含最佳實踐、行業認可的標準以及隨附的備忘單。停止谷歌搜索 Git 命令並真正學習 它！

我們要查找的下一個事件是 mouseenter;我們這樣做是為了通過設置 cursor 的樣式來添加基本的交互性 表示滑塊或特定滑塊卡已被抓取。

sliderContainer.addEventListener("mouseenter", () => {
    sliderContainer.style.cursor = "grab";
});

之後，我們將監聽 mouseup 事件並設置 cursor 樣式為 grab ，這樣當用戶停止抓取或點擊時，cursor 會變回 grab 而不是 grabbing .我們還將返回 pressed false 的值 .

sliderContainer.addEventListener("mouseup", () => {
    sliderContainer.style.cursor = "grab";
    pressed = false;
});

到目前為止，我們已經能夠添加一些交互性，但我們還沒有實現主要功能，即可拖動的輪播。

處理核心邏輯

現在讓我們處理核心邏輯；我們仍將定位於 sliderContainer ，但這次我們將監聽 mousemove 事件。在回調函數中，我們會檢查 pressed 是 false 這樣我們就可以返回函數，它什麼也不做。

sliderContainer.addEventListener("mousemove", (e) => {
    if (!pressed) return;
    ...
});

但是，如果 pressed 是 true ，我們可以繼續一些其他的邏輯。第一步是防止默認行為，然後設置 x 到 offsetX （鼠標指針相對於容器滑塊元素的x坐標）。

sliderContainer.addEventListener("mousemove", (e) => {
    if (!pressed) return;
    e.preventDefault();

    x = e.offsetX;
});

您會注意到，當我們設置 innerSlider 的樣式時 CSS 類，我們添加了 position: absolute 和一個 left 0 的值 .現在我們要更改 left x-startX 的值 當用戶拖動輪播時動態。 （我們從父 div 的偏移量中減去當前位置）。

sliderContainer.addEventListener("mousemove", (e) => {
    if (!pressed) return;
    e.preventDefault();

    x = e.offsetX;

    innerSlider.style.left = `${x - startX}px`;
});

此時，您會注意到一切正常，因為我們的滑塊現在可以正常拖動，但滾動可以停止的位置沒有限制。

現在讓我們通過定義一個新函數來處理它。首先是獲取內部和外部滑塊容器的位置，然後我們現在可以創建兩個條件語句來為雙方工作。

const checkBoundary = () => {
    let outer = sliderContainer.getBoundingClientRect();
    let inner = innerSlider.getBoundingClientRect();

    if (parseInt(innerSlider.style.left) > 0) {
        innerSlider.style.left = "0px";
    }

    if (inner.right < outer.right) {
        innerSlider.style.left = `-${inner.width - outer.width}px`;
    }
};

完成後，我們現在可以在 mousemove 中調用此函數 事件監聽器作為最後一件事：

sliderContainer.addEventListener("mousemove", (e) => {
    ...
    checkBoundary();
});

使用這種方法，我們能夠從頭開始使用 JavaScript 成功創建一個可拖動的滑塊。

結論

在本文中，我們學習瞭如何使用原生 JavaScript 從頭開始創建可拖動的輪播，還了解了所有使用的鼠標事件之間的區別。