随着现代化设计变得流行，越来越多的企业和个人都需要创建漂亮的显示的Web页面。 其中一种最常用的页面组件是轮播图。 在这篇文章中，我们将介绍使用Material Design Lite（MDL）框架创建漂亮的轮播图并提供实战示例代码。
Material Design Lite 框架简述
Material Design Lite是由Google创建的一个基于响应式设计的Web前端框架。 其主要目标是帮助Web开发人员轻松地创建网站和应用程序，具有响应式，现代和漂亮的设计。 Material Design Lite也提供了一些非常好的UI组件，如模态框，卡片，章节等等。
使用 Material Design Lite 创建轮播图
在MDL 框架中，有一个非常棒的轮播图组件，称为"Slider" 。 Slider是一个非常灵活的组件，可自动生成漂亮的轮播图，同时为开发人员提供了高度的自定义选项。
轮播图需要一些HTML和JavaScript代码以及一些CSS样式才能正常工作。 接下来我们将指导你一步一步完成最基本的MDL Slider轮播图，然后逐步自定义并使其变得更加漂亮。
创建基本的 MDL Slider 轮播图
首先，我们需要使用MDL框架和相关的Javascript和CSS文件。 请确保将以下代码添加到您的HTML头部:
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css"> <script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script> <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
然后，我们需要一些HTML结构来创建轮播图。
-- -------------------- ---- -------
---- ---------------------------- ---------- --------------
-------- ------- -----------------
---- -------------------------------
------------
------
---- ---------------------------- ---------- --------------
---- -----------------
---- --------------- ------------------
---- ----------------- -------------- ----------------------------
--- ----------------------------- ----------
---- -------- ----- ---
--- ----------------------- ----------------
---- ------------------- ---------------------------------------------
-----
--- ----------------------- ----------------
---- ------------------- ---------------------------------------------
-----
--- ----------------------- ----------------
---- ------------------- ---------------------------------------------
-----
-----
------
------
------
------
----------
------您可以看到通过使用mdl-slider类和data-mdl-for="slider-cards"属性来定义Slider元素。
ul 元素的插入了三个li 元素，其中包含需要展示的图像。
现在，我们需要添加CSS样式来使轮播图正常工作，并呈现漂亮的样式。
-- -------------------- ---- ------- -- ------ --- ------ -- ------------------ ------ ----- --------- --------- -------- -- ------- --- ----- ------ ------------------- ------- ---- ---------------- ------- ---- -------------- ------- ---- ----------- ------- ---- - ------------------------- -------- -- - ------------ - ------ ----- - -------------------------------- - ----------------- ------------------------------------------------ ---------------- ------ ------------------ ---------- -------------------- ------- - -------------------------------- - ----------------- ------------------------------------------------ ---------------- ------ ------------------ ---------- -------------------- ------- - -------------------------------- - ----------------- ------------------------------------------------ -------------------- ------- ---------------- ------ ------------------ ---------- -
最后，我们需要一些将Slider初始化的JavaScript代码。
// Initializes the MDL Slider
var slider = document.querySelector('.mdl-slider');
if (slider) {
slider.MaterialSlider.change(0);
}现在，您将看到一个基本的MDL Slider轮播图显示在您的页面上。 您还可以使用mdl-slider类的其他选项来定制轮播图，例如指定滑块的高度和宽度，更改背景颜色等等。
创建自定义 MDL Slider 轮播图
现在，我们想创建一些自定义MDL Slider轮播图，使其更加漂亮。
添加指示器
添加轮播图的指示器是一种很好的方法，可以让用户知道当前轮播图所在的位置。 为了实现这一点，我们需要添加一些HTML和CSS样式。
<!-- Add pagination indicators --> <div class="mdl-slider__indicators"> <span class="mdl-slider__indicator active"></span> <span class="mdl-slider__indicator"></span> <span class="mdl-slider__indicator"></span> </div>
-- -------------------- ---- ------- -- ------ --- ------ ---------- -- ------------------------ ----------- ------- ----------- ----- - ----------------------- ------- ----- ------ ----- -------------- ----- -------- ------------- ----------------- --------- ---- ---- ----- ------- - ---- ------- -------- - ------------------------------ ----------------- ------ -
接下来，我们将添加一些JavaScript代码来更改指示器的活动状态。
-- -------------------- ---- -------
-- ---------- --- --- ------ ---- --------- ------
--- ------ - --------------------------------------
-- -------- -
-------------
-
-------- ------------ -
-- --- ----------
--- ---------- - ----------------------------------------------------
-- --- --- ------ ---------
--------------------- ------------
-- --- --------- ----- ---------
--- ---- - - -- - - ------------------ ---- -
--------------------------------------- ---------- -
--- -------------- - -------------------------------------
---------------------------------- ------------
---
-
-- --- -- ------ ----- -- ------ ----------
--------------------------------- ---------- -
--- -------------- - ----------------------------
---------------------------------- ------------
---
-
-------- ------------------------- ----------- -
--- ---- - - -- - - ------------------ ---- -
-- -- --- ------ -
--------------------------------------
- ---- -
-----------------------------------------
-
-
-添加动画
将动画应用于轮播图可增强用户体验，并使其更加生动。 我们可以使用CSS动画以一种很好的方式实现这一目标。
-- -------------------- ---- -------
-- ------ --- ------ --
----------------- -
------ -----
--------- ---------
-------- --
------- --- ----- ------
------------------- ------- ---- --------- ----
---------------- ------- ---- --------- ----
-------------- ------- ---- --------- ----
----------- ------- ---- --------- ----
-
------------------------ -
-------- --
---------- ------------
-------- --
-
-------------------------- -
---------- ------------------
-------- --
-------- ---
-
---------------------- -
---------- -----------------
-------- --
-------- ---
-
---------- -------- -
-- -
-------- --
---------- -----------
-
---- -
-------- --
---------- ------------
-
-
---------- --------- -
-- -
-------- --
---------- ------------
-
---- -
-------- ----
---------- -----------
-
--- -------------------- ---- -------
-- ------ ----- ------- -- ------ -----
--------------------------------- ---------- -
--- ----------- - ----------------------------
--- --------- - ----------- - --
--- --------- - ----------- - --
-- ---- ------
-- ---------- - -- -
--------- - ------------------------- - --
-
-- ---------- -- -------------------------- -
--------- - --
-
-- --- -------
--- ------ - -----------------------------------------------
--- ---- - - -- - - -------------- ---- -
-------------------------------------- --------
-
--------------------------------------------
--------------------------------------------
----------------------------------------
---改变自动滚动
为了增强用户体验，我们希望自动滚动项。我们可以使用JavaScript代码定时调用MaterialSlider.change() 来实现这一点。
-- -------------------- ---- -------
-- ---------- ---- ----- --------
--- ----------------- - ---------------------- ------
-------- ----------- -
-- --- ------ ------- --- ------ -----
--- ------ - --------------------------------------
-- -------- -
--- ----------- - ----------------------------
---------------------------------------- - ---
-
-让我们看一下最终的产品：
-- -------------------- ---- -------
---- ---------------------------- ---------- --------------
-------- ------- -----------------
---- -------------------------------
------------
------
---- ---------------------------- ---------- --------------
---- -----------------
---- --------------- ------------------
---- ----------------- -------------- ----------------------------
--- ----------------------------- ----------
---- -------- ----- ---
--- ----------------------- ----------------
---- ------------------- -----------------------------------------------
-----
--- ----------------------- ----------------
---- ------------------- -----------------------------------------------
-----
--- ----------------------- ----------------
---- ------------------- -----------------------------------------------
-----
-----
---- -------------------------------
----- ---------------------------- ---------------
----- -------------------------------------
----- -------------------------------------
------
------
------
------
------
----------
-------- -------------------- ---- -------
-- ------ --- ------ --
----------------- -
------ -----
--------- ---------
-------- --
------- --- ----- ------
------------------- ------- ---- --------- ----
---------------- ------- ---- --------- ----
-------------- ------- ---- --------- ----
----------- ------- ---- --------- ----
-
------------------------ -
-------- --
---------- ------------
-------- --
-
-------------------------- -
---------- ------------------
-------- --
-------- ---
-
---------------------- -
---------- -----------------
-------- --
-------- ---
-
---------- -------- -
-- -
-------- --
---------- -----------
-
---- -
-------- --
---------- ------------
-
-
---------- --------- -
-- -
-------- --
---------- ------------
-
---- -
-------- ----
---------- -----------
-
-
-- ------ --- ------ ---------- --
----------------------- -
----------- -------
----------- -----
-
---------------------- -
------- -----
------ -----
-------------- -----
-------- -------------
----------------- --------- ---- ---- -----
------- - ----
------- --------
-
----------------------------- -
----------------- ------
--- -------------------- ---- -------
-- ----------- --- --- ------
--- ------ - --------------------------------------
-- -------- -
--------------------------------
-
-- ---------- ---- ----- --------
--- ----------------- - ---------------------- ------
-------- ----------- -
-- --- ------ ------- --- ------ -----
--- ------ - --------------------------------------
-- -------- -
--- ----------- - ----------------------------
---------------------------------------- - ---
-
-
-- ---------- --- --- ------ ---- --------- ------
--- ------ - --------------------------------------
-- -------- -
-------------
-
-------- ------------ -
-- --- ----------
--- ---------- - ----------------------------------------------------
-- --- --- ------ ---------
--------------------- ------------
-- --- --------- ----- ---------
--- ---- - - -- - - ------------------ ---- -
--------------------------------------- ---------- -
--- -------------- - -------------------------------------
---------------------------------- ------------
---
-
-- --- -- ------ ----- -- ------ ----------
--------------------------------- ---------- -
--- -------------- - ----------------------------
---------------------------------- ------------
---
-
-------- ------------------------- ----------- -
--- ---- - - -- - - ------------------ ---- -
-- -- --- ------ -
--------------------------------------
- ---- -
-----------------------------------------
-
-
-
--------------------------------- ---------- -
--- ----------- - ----------------------------
--- --------- - ----------- - --
--- --------- - ----------- - --
-- ---- ------
-- ---------- - -- -
--------- - ------------------------- - --
-
-- ---------- -- -------------------------- -
--------- - --
-
-- --- -------
--- ------ - -----------------------------------------------
--- ---- - - -- - - -------------- ---- -
-------------------------------------- --------
-
--------------------------------------------
--------------------------------------------
----------------------------------------
---总结：
在此文章中，我们阐述了使用MDL框架创建漂亮的轮播图。 首先，我们创建了一个基本的MDL Slider轮播图，然后提供了如何自定义指示器，动画和自动轮播等功能。 最后，我们提供了完整的HTML，CSS和JavaScript代码以及演示漂亮的轮播图。 我们希望您学到了如何使用MDL框架创建轮播图并通过此来创建具有高度自定义和美感的网站和应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64700580968c7c53b0e2d037