Web Components 是一项新的 Web 标准，它允许开发者创建自定义的 HTML 元素。这些自定义元素可以通过 JavaScript 编写，并且可以在任何 Web 应用程序中使用。在本文中，我们将学习如何使用 Web Components 实现图片轮播，以展示这一技术的强大功能。
准备工作
在开始之前，我们需要准备一些工作：
- 一个 HTML 文件来显示图片轮播。
- 一些 CSS 样式来美化轮播。
- 一些 JavaScript 代码来创建和控制 Web Component。
创建 Web Component
我们将创建一个名为 image-slider 的自定义元素。我们需要创建一个类来扩展 HTMLElement，然后使用 window.customElements.define() 方法来定义 image-slider 元素。
class ImageSlider extends HTMLElement {
constructor() {
super();
}
}
window.customElements.define('image-slider', ImageSlider);添加图片
我们需要将图片添加到 image-slider 元素中。我们可以使用 HTML 的 template 元素来定义轮播所需的 HTML 片段。
-- -------------------- ---- -------
----- ----------- ------- ----------- -
------------- -
--------
----- -------- - -----------------------------------
------------------ - -
-------
------- -
-------- -----
----------- -------
-
------ -
----- - - -----
------ -----
----------- --------- ---- ------------
-
--------
---- ---------------------
--
----- ---------- - ------------------- ----- ------ ---
---------------------------------------------------------
-
-
-------------------------------------------- -------------我们创建了一个包含 slider 容器的 template，这个容器可以将所有的轮播图片容纳进去。这些图片将被添加为 shadow DOM 中的一部分。
显示图片
接下来，我们需要使用 JavaScript 填充轮播容器。我们将使用一个函数来添加图片，并给每张图片添加一个唯一的索引值。这个索引值将用于标识当前显示哪张图片。
-- -------------------- ---- -------
----- ----------- ------- ----------- -
------------- -
--------
----- -------- - -----------------------------------
------------------ - -
-------
------- -
-------- -----
----------- -------
-
------ -
----- - - -----
------ -----
----------- --------- ---- ------------
-
--------
---- ---------------------
--
----- ---------- - ------------------- ----- ------ ---
---------------------------------------------------------
-
------------------- -
----------- - -----------------------------
--------------------------- ------ -- -
----- ----- - ------------------------------
-----------------------------
--------------------- - ------------------- - --------
----- ------ - -----------------------------------------
--------------------------
-------------------------
---
-
-
-------------------------------------------- -------------我们使用 connectedCallback() 方法，它会在元素加入到 DOM 中时被调用，来添加图片。
我们选择所有的 img 元素，并使用 forEach() 来添加每个图片到轮播列表中。对于每个图片，我们创建一个 div 元素，并将图片添加到这个 div 元素中。根据索引值，我们计算 div 元素的 transform 属性，以使每个 div 元素超出容器的 100%。
自动轮播
现在我们已经可以显示图片了，但是我们需要为轮播添加一些交互功能。我们需要使用 JavaScript 来实现轮播，以便让用户可以手动滑动轮播，或者让轮播自动滑动。
我们可以添加一个 autoplay 属性来启用自动轮播功能。我们定义一个自动滑动函数，并在构造函数中启动它。每当轮播到达最后一张图片时，我们回到第一张。
-- -------------------- ---- -------
----- ----------- ------- ----------- -
------------- -
--------
----- -------- - -----------------------------------
------------------ - -
-------
------- -
-------- -----
----------- -------
-
------ -
----- - - -----
------ -----
----------- --------- ---- ------------
-
--------
---- ---------------------
--
----- ---------- - ------------------- ----- ------ ---
---------------------------------------------------------
------------- - ------------------------------
----------------- - --
----------- - -------------------------------------------
---------------- - -------------------
-------------------
-
------------- -
-- --------------- -
------------- - -------------- -- -
-----------------------
-- ------
-
-
-------------------- -
------ ----------- -
---- -------
--------------------
------
---- -------
--------
--------------------
------
-
-- ------------------ -- ----------------- -
----------------- - --
- ---- -- ------------------ - -- -
----------------- - ---------------- - --
-
----- ---------- - ----------------- - -----
--------------------------- -- -
--------------------- - -----------------------------
---
-
-
-------------------------------------------- -------------我们添加一个方法来启动轮播，并使用 clearInterval() 方法来停止轮播。我们通过 currentSlide 和 totalSlides 属性来跟踪当前的轮播状态。
完整代码
-- -------------------- ---- -------
----- ----------- ------- ----------- -
------------- -
--------
----- -------- - -----------------------------------
------------------ - -
-------
------- -
-------- -----
----------- -------
-
------ -
----- - - -----
------ -----
----------- --------- ---- ------------
-
--------
---- ---------------------
--
----- ---------- - ------------------- ----- ------ ---
---------------------------------------------------------
------------- - ------------------------------
----------------- - --
----------- - -------------------------------------------
---------------- - -------------------
-------------------
-
------------------- -
----------- - -----------------------------
--------------------------- ------ -- -
----- ----- - ------------------------------
-----------------------------
--------------------- - ------------------- - --------
----- ------ - -----------------------------------------
--------------------------
-------------------------
---
-
------------- -
-- --------------- -
------------- - -------------- -- -
-----------------------
-- ------
-
-
------------ -
-----------------------------
-
-------------------- -
------ ----------- -
---- -------
--------------------
------
---- -------
--------
--------------------
------
-
-- ------------------ -- ----------------- -
----------------- - --
- ---- -- ------------------ - -- -
----------------- - ---------------- - --
-
----- ---------- - ----------------- - -----
--------------------------- -- -
--------------------- - -----------------------------
---
-
-
-------------------------------------------- -------------结论
Web Components 是一个非常强大的 Web 标准，可以使用它来创建自定义的 HTML 元素。图片轮播是一个经典的网页组件，我们已经学习了如何使用 Web Components 实现一个简单的图片轮播。我们还介绍了如何自动滑动和在 JavaScript 中控制轮播。学习和实践 Web Components 将有助于您更好地了解现代 Web 应用程序的构建方式。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66f7d159c5c563ced5ac7eac