英文 | https://www.ordinarycoders.com/blog/article/top-javascript-animation-libraries

翻译 | 小爱

JavaScript动画库可以用于处理复杂的动画，这些动画可以快速创建强大的视觉效果与组件。使用内置属性可以在几分钟内向你的网站添加旋转，平移，缓动和显示。

我们收集了一些视觉上最有趣的动画库，这些库在页面加载时产生了比较好的视觉效果。

为了快速开发，本文将使用CDN（内容交付网络），但是，所有这些JavaScript库都可以下载并应用到你的项目中。

注意：我们建议你花一些时间在网站的小部分中实施这些JavaScript库。如果你过于着急使用这些动画，则可能会使该站点不堪重负，并且动画看起来可能有点花哨。

1、ScrollReveal

地址：https://scrollrevealjs.org/

ScrollReveal是由朱利安·劳埃德（Julian Lloyd）创建的JavaScript库。使用后，JS库会在HTML元素进入或离开视口时显示它们。与所有主流浏览器兼容，可以轻松地将其添加到所需的任意多个HTML元素中。

（1）将ScrollReveal CDN添加到<head>元素：

<!DOCTYPE html><html>  <head>    <!-- Required meta tags -->    <meta charset="utf-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>Title</title>    <!--ScrollReveal JS-->    <script src="https://unpkg.com/scrollreveal"></script>  </head>  <body>    ...
  </body></html>

一般而言，可以将JavaScript CDN添加到<head>元素中，也可以将其添加到结束<body>标记之前。但是，ScrollReveal文档建议将CDN添加到<head>元素中，以防止在实现ScrollReveal之前出现内容闪烁。

如果你使用的是Bootstrap，其添加方式如下：

<!DOCTYPE html><html>  <head>    <!-- Required meta tags -->    <meta charset="utf-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>Title</title>    <!--Bootstrap CSS-->    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">    <!--ScrollReveal JS-->    <script src="https://unpkg.com/scrollreveal"></script>  </head>  <body>    ...
    <!-- Optional Javascript -->    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>  </body></html>

你使用的是Bootstrap，只需在Bootstrap CSS CDN之后添加ScrollReveal CDN。

<!DOCTYPE html><html>  <head>    <!-- Required meta tags -->    <meta charset="utf-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>Title</title>    <!--ScrollReveal JS-->    <script src="https://unpkg.com/scrollreveal@4.0.0/dist/scrollreveal.min.js"></script>  </head>  <body>    ...
  </body></html>

将ScrollReveal CDN添加到该<head>元素，并指定ScrollReveal的固定版本并使用最小的发行版。

（2）确定要设置动画的元素：

<div class="container p-4">    <div class="card reveal-card"> #custom ScrollReveal class      <div class="card-body">        <h5 class="card-title">Card title</h5>        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>        <a href="#" class="btn btn-primary">Go somewhere</a>      </div>  </div></div>

ScrollReveal根据元素的类属性值调用它们。我们将为此示例添加一个自定义类，称为reveal-card。

（3）使用ScrollReveal构造函数：

// Card revealScrollReveal().reveal('.reveal-card');

添加了CDN并标识了类属性值后，我们现在可以使用构造函数ScollReveal()。并添加它，然后添加reveal()方法以创建显示动画。在此方法中，将自定义类指定为目标。

（4）将构造函数添加到script.js文件或<script>元素中：

<!DOCTYPE html><html>  <head>    <!-- Required meta tags -->    <meta charset="utf-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>Title</title>    <!--ScrollReveal JS-->    <script src="https://unpkg.com/scrollreveal@4.0.0/dist/scrollreveal.min.js"></script>  </head>  <body>    ...    <script>    // Card reveal    ScrollReveal().reveal('.reveal-card');</script>  </body></html>

该脚本可以添加到单独的JS文件中，也可以直接放置在HTML模板中。上面的代码将其直接放置在HTML模板中。

如果你有兴趣将其添加到单独的JS文件中，请学习如何使用Django静态,地址：https://www.ordinarycoders.com/blog/article/django-static-files-img-js-css。

（5）在ScrollReveal中添加可自定义的选项：

要添加延迟：

// Card revealScrollReveal().reveal('.reveal-card', {delay:500});

你还可以选择向显示方法添加选项，例如延迟。以毫秒为单位。

要添加持续时间：

// Card revealScrollReveal().reveal('.reveal-card', {duration:500});

持续时间是另一个ScrollReveal选项，以毫秒为单位。它控制动画完成的时间。

要添加间隔：

// Card revealScrollReveal().reveal('.card', {interval:500});

如果你希望一次显示一组卡片或物件，则间隔选项非常有用。使用Bootstrap卡类属性而不是使用自定义类属性值，是将选项添加到所有卡元素的简便方法。同样，这以毫秒为单位。

（6）将加载隐藏的自定义类添加到CSS：

<!DOCTYPE html><html>  <head>    <!-- Required meta tags -->    <meta charset="utf-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>Title</title>    <!--ScrollReveal JS-->    <script src="https://unpkg.com/scrollreveal@4.0.0/dist/scrollreveal.min.js"></script>    <style>     /*ScrollReveal load-hidden CSS*/        .sr .load-hidden {           visibility: hidden;        }</style>  </head>  <body>    ...    <script>    // Card reveal    ScrollReveal().reveal('.reveal-card');</script>  </body></html>

将CDN添加到<head>元素中有助于防止闪烁，但是仅在快速Internet连接的情况下。要解决互联网速度缓慢的问题，请创建一个名为的自定义CSS声明load-hidden。

这可以在stylesheet.css文件中，也可以在<style>HTML模板中的元素中，就像构造函数一样。

<div class="container p-4">    <div class="card reveal-card load-hidden"> #a load-hidden to the element      <div class="card-body">        <h5 class="card-title">Card title</h5>        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>        <a href="#" class="btn btn-primary">Go somewhere</a>      </div>  </div></div>

需要将自定义CSS声明作为类属性值添加到要显示的HTML元素中。然后在页面加载时，将不再有任何闪烁。

2、Typed.js

地址：https://mattboldt.github.io/typed.js/docs/

第二个JavaScript库就是Typed.js，这是Matt Boldt开发的库。该库将打印出你选择的字符串，就好像你在输入文字一样。像以前的库一样，可以通过下载库或使用CDN来添加Typed.js。

（1）将Typed.js CDN添加到<body>元素中：

<!DOCTYPE html><html>  <head>    <!-- Required meta tags -->    <meta charset="utf-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>Title</title>  </head>  <body>    ...
    <script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.11"></script>     </body></html>

在结束<body>标记之前添加CDN 。

（2）将Typed.js自定义id属性添加到模板：

<div class =“ container p-4”>     <span id =“ typed”> </ span> </ div>

Typed.js使用id属性值而不是class属性值。在HTML模板中，添加带有自定义id属性值的span标签（在本例中）。

（3）添加Typed.js脚本：

<!DOCTYPE html><html>  <head>    <!-- Required meta tags -->    <meta charset="utf-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>Title</title>  </head>  <body>    ...
    <script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.11"></script>      <script>       var typed = new Typed('#typed', {         strings: ['Type anything you want', 'It can type multiple strings'],       });</script>   </body></html>

然后在<script>HTML元素或单独的script.js文件中，添加一个JavaScript变量并将其strings作为属性调用。将字符串以数组的形式列出，并在每个短语周围加上引号。上面的示例只是将脚本添加到HTML模板中。

（4）自定义Typed.js：

要增加打字速度：

var typed = new Typed('#typed', {    strings: ['Type anything you want', 'It can type multiple strings'],    typeSpeed: 80,  });

加快字母输入速度（以毫秒为单位）。

要添加启动延迟：

var typed = new Typed('#typed', {    strings: ['Type anything you want', 'It can type multiple strings'],    startDelay: 80,  });

为键入增加开始延迟。这也以毫秒为单位。

要增加后退速度，请执行以下操作：

var typed = new Typed('#typed', {    strings: ['Type anything you want', 'It can type multiple strings'],    backSpeed: 80,
  });

指定后退速度将确定键入的后退速度（以毫秒为单位）。

要添加智能退格键：

var typed = new Typed('#typed', {    strings: ['Type anything you want', 'It can type multiple strings'],    smartBackspace: true, // this is a default  });

添加智能退格键,仅允许在与先前字符串不匹配的字符串部分上进行退格。

例如，如果你有两个字符串“我知道CSS”和“我知道JS”，则智能退格键将仅退格为“ CSS”，以保留在第二个字符串中重复的字符串部分。

要添加循环：

var typed = new Typed('#typed', {    strings: ['Type anything you want', 'It can type multiple strings'],    loop: true,    loopCount:1,  });

讨论的最终定制是loop。loopCount如果希望指定循环数，请选择循环键入内容并添加属性。

有关更多属性，请查看下面链接的文档。

Typed.js文档地址：https://mattboldt.github.io/typed.js/docs/

3、Anime.js

地址：https://animejs.com/

转到Anime.js。这个JavaScript动画库是由朱利安·加尼尔（Julian Garnier）创建的，可在Chrome，Safari，IE / Edge，Firefox和Opera浏览器上运行。它可以用于设置各种目标的动画，包括DOM节点，CSS选择器或JavaScript对象。

（1）添加Anime.js CDN：

<!DOCTYPE html><html>  <head>    <!-- Required meta tags -->    <meta charset="utf-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>Title</title>  </head>  <body>    ...
    <!-- Anime.js JS -->    <script src="https://cdn.jsdelivr.net/npm/animejs@3.0.1/lib/anime.min.js"></script>  </body></html>

将Anime.js CDN添加到HTML文档的底部。

（2）找到要设置动画的元素，类或ID：

<div class="container p-4">    <div class="card mx-3">      <div class="card-body">        <h5 class="card-title">Card title</h5>        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>        <a href="#" class="btn btn-primary">Go somewhere</a>    </div>  </div> </div>

在此示例中，我们将使用cardclass属性值对卡片进行动画处理，但是，你也可以选择对HTML元素本身或ID进行动画处理。

（3）添加Anime.js函数：

<!DOCTYPE html><html>  <head>    <!-- Required meta tags -->    <meta charset="utf-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>Title</title>  </head>  <body>    ...
    <!-- Anime.js JS -->    <script src="https://cdn.jsdelivr.net/npm/animejs@3.0.1/lib/anime.min.js"></script>    <script type="text/javascript">    let animation = anime({        targets: '.card',        translateX: 100,    });    </script>  </body></html>

最后，必要的代码是指定目标和属性的JavaScript函数。上面的示例将卡片在页面加载时向右平移100px。

（4）使用其他Anime.js属性：

要翻译对象：

let animation = anime({    targets: '.card',    translateX: 100,    translateY: 100,});

translateX沿X轴从左或右移动对象，同时translateY向上或向下移动对象。单位是像素。

缩放对象：

let animation = anime（{     target：'.card'，    scaleX：0.5，    scaleY：0.5，}）;

scaleX水平，scaleY垂直，只需要更改对象的大小，同时更改水平与垂直大小。请注意，如果你在X和Y轴上的缩放比例不均匀，则对象将看起来被压缩或拉长。

旋转对象：

let animation = anime({    targets: '.card',    rotateX: 0.5,    rotateY: 0.5,});

rotateX沿X轴rotateY旋转对象，同时沿Y轴旋转对象。

倾斜对象：

let animation = anime（{     target：'.card'，    skewX：1，    skewY：4，}）;

skewX沿X轴skewY倾斜对象，而垂直倾斜对象。

设置持续时间：

let animation = anime（{     target：'.card'，    duration：6000 }）;

持续时间以毫秒为单位，并确定动画的总时间。

设置延迟：

let animation = anime（{     target：'.card'，    duration：6000 }）;

延迟也以毫秒为单位进行度量，并指定动画何时开始播放。

这些只是开始使用JS库的一些基本属性。但是Anime.js属性参数很强大，一起使用时会产生整体效果。

因此，你可以查看文档以获取更多想法。

Anime.js文档：https://animejs.com/

4、Chart.js

地址：https://www.chartjs.org/

Evert Timberg被认为是Chart.js的作者，它是一个JavaScript库，允许开发人员快速将图表添加到你的项目中。有8种图表可供选择，所有图表都是开源的。此库的图表显示干净，如果你想要这种干净的效果，那它是你的最佳选择。

（1）将Chart.js CDN添加到<head>元素：

<!DOCTYPE html><html>  <head>    <!-- Required meta tags -->    <meta charset="utf-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>Title</title>    <!--Chart.js JS-->     <script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.3/dist/Chart.min.js"></script>   </head>  <body>    ...
  </body></html>

在结束<head>标记之前添加Chart.js CDN 。

（2）将图表添加到模板：

<div class ="container">   <canvas id = " myChart" width ="400" height ="400"> </ canvas> </ div>

要调用图表，<canvas>请在HTML模板中添加一个元素。然后指定一个自定义的id以及width和height属性。这将是图表在HTML文档中的位置。

（3）添加图表数据：

要创建条形图：

var ctx = document.getElementById('myChart').getContext('2d');var myChart = new Chart(ctx, {    type: 'bar',    data: {        labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],        datasets: [{            label: '# of Votes',            data: [12, 19, 3, 5, 2, 3],            backgroundColor: [                'rgba(255, 99, 132, 0.2)',                'rgba(54, 162, 235, 0.2)',                'rgba(255, 206, 86, 0.2)',                'rgba(75, 192, 192, 0.2)',                'rgba(153, 102, 255, 0.2)',                'rgba(255, 159, 64, 0.2)'            ],            borderColor: [                'rgba(255, 99, 132, 1)',                'rgba(54, 162, 235, 1)',                'rgba(255, 206, 86, 1)',                'rgba(75, 192, 192, 1)',                'rgba(153, 102, 255, 1)',                'rgba(255, 159, 64, 1)'            ],            borderWidth: 1        }]    },});

然后将类型，数据和图表颜色添加到<script> HTML元素。上面的脚本将图表指定为条形图，可以直接在<canvas>HTML元素之后添加。

要创建折线图：

var ctx = document.getElementById（'myChart'）。getContext（'2d'）; var myChart = new Chart（ctx，{     type：'line'，    data：{         ...         }]     }，}）;

数据以与条形图相同的格式添加。唯一需要更改的是type。

要创建雷达图：

var ctx = document.getElementById（'myChart'）。getContext（'2d'）; var myChart = new Chart（ctx，{     type：'radar'，    data：{         ...         }]     }，}）;

像条形图和折线图一样添加数据。

要创建一个甜甜圈图：

var ctx = document.getElementById('myChart').getContext('2d');var myChart = new Chart(ctx, {    type: 'doughnut',    data: {        datasets: [{            data: [70,10,6],           borderColor:[              "#3cba9f",              "#ffa500",              "#c45850",           ],           backgroundColor: [              "rgb(60,186,159,0.1)",              "rgb(255,165,0,0.1)",              "rgb(196,88,80,0.1)",           ],              borderWidth:2,         }]    },});

甜甜圈图数据的格式也与此类似。

创建饼图：

var ctx = document.getElementById('myChart').getContext('2d');var myChart = new Chart(ctx, {    type: 'pie',    data: {        datasets: [{            data: [70,10,6],           borderColor:[              "#3cba9f",              "#ffa500",              "#c45850",           ],           backgroundColor: [              "rgb(60,186,159,0.1)",              "rgb(255,165,0,0.1)",              "rgb(196,88,80,0.1)",           ],              borderWidth:2,         }]    },});

饼图也一样。

要创建极地面积图：

var ctx = document.getElementById('myChart').getContext('2d');var myChart = new Chart(ctx, {    type: 'polarArea',    data: {        datasets: [{            data: [70,10,6],           borderColor:[              "#3cba9f",              "#ffa500",              "#c45850",           ],           backgroundColor: [              "rgb(60,186,159,0.1)",              "rgb(255,165,0,0.1)",              "rgb(196,88,80,0.1)",           ],              borderWidth:2,         }]    },});

并带有极地面积图。

要创建气泡图：

var ctx = document.getElementById('myChart').getContext('2d');var myChart = new Chart(ctx, {    type: 'bubble',    data: {        labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],        datasets: [{            label: '# of Votes',            data: [              {x: -10, y: 3},              {x: 4, y: 10},              {x: 10, y: 5}            ],            ...        }]    },});

对于气泡图，需要将x和y点定义为数据。

要创建散点图：

var ctx = document.getElementById('myChart').getContext('2d');var myChart = new Chart(ctx, {    type: 'scatter',    data: {        labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],        datasets: [{            label: '# of Votes',            data: [              {x: -10, y: 3},              {x: 4, y: 10},              {x: 10, y: 5}            ],            ...        }]    },});

对于散点图，还需要将x和y点定义为数据。

（4）使用Chart.js选项：

添加图表图例：

var chart = new Chart(ctx, {    type: 'bar',    data: data,    options: {        legend: {            display: true,            labels: {                fontColor: 'rgb(255, 99, 132)'            }        }    }});

添加填充：

var chart = new Chart（ctx，{     type：'bar'，    data：data，    options：{         layout：{             padding：{                 left：50，                right：0，                top：0，                bottom：0             }         }     } }}）;

添加标题：

var chart = new Chart（ctx，{     type：'line'，    data：data，    options：{         title：{             display：true，            text：'Custom Chart Title'         }     } }）;

有关更多选项，请参见下面链接的文档，或查看如何使用Chart.js |。11 Chart.js示例。

我们仅介绍了一些基础知识以帮助你入门。

Chart.js文档：https://www.chartjs.org/

5、Slick

地址：https://kenwheeler.github.io/slick/

Slick是一个创建轮播图比较方便的JS库，它在创建轮播图方面的功能比较强大，且省时省力。由Ken Wheeler制造的Slick是“将需要的最后一个转盘”。

（1）将Slick CDN添加到文档中：

<!DOCTYPE html><html>  <head>    <!-- Required meta tags -->    <meta charset="utf-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>Title</title>    <!--Slick CSS-->    <!-- Add the slick-theme.css if you want default styling -->    <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>    <!-- Add the slick-theme.css if you want default styling -->    <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css"/>   </head>  <body>    ...    <!--Additional JS-->    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-migrate/3.3.1/jquery-migrate.min.js"></script>    <!--Slick JS-->    <script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>

  </body></html>

首先，你可以将Slick CSS CDN添加到<head>元素。然后在<body>元素的末尾添加Slick JS CDN。你还需要在Slick CDN之前添加jQuery和jQuery Migrate CDN，此库才能正常运行。

（2）创建HTML轮播：

<div class="carousel">    <div>your content</div>    <div>your content</div>    <div>your content</div></div>

然后，转到HTML模板，创建一个具有自定义类属性值的新除法元素，并嵌套等于所需幻灯片数量的除法元素。

如果你要使用Django模型：

<div class="container">  <div class="carousel">    {% for c in card %}      <div class="card mx-3">        <div class="card-body">          <h5 class="card-title">{{c.title}}</h5>          <p class="card-text">{{c.text}}</p>        </div>    </div>    {% endfor %}  </div></div>

如果你要使用轮播来显示大量商品或产品（例如卡片），建议你使用Django模型，以使用相同的代码快速创建所需数量的幻灯片。

（3）添加Slick JS函数：

$(document).ready(function(){  $('.carousel').slick();});

要使轮播正常运行，你需要做的最后一件事是位于CDN之后的JavaScript函数。

<!DOCTYPE html><html>  <head>    <!-- Required meta tags -->    <meta charset="utf-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>Title</title>    <!--Slick CSS-->    <!-- Add the slick-theme.css if you want default styling -->    <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>    <!-- Add the slick-theme.css if you want default styling -->    <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css"/>   </head>  <body>    ...    <!--Additional JS-->    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-migrate/3.3.1/jquery-migrate.min.js"></script>    <script>      $(document).ready(function(){        $('.carousel').slick();      });</script>  </body></html>

你可以选择将JS直接放置在CDN下方，也可以使用Django load static将其作为静态元素加载。刷新页面时，会有一个轮播，一次显示一张幻灯片。

（4）添加Slick JS函数：

对于点：

$(document).ready(function(){  $('.carousel').slick({  dots:true,  });});

将设置添加dots为布尔值（即 true或false）。

对于箭头：

$(document).ready(function(){  $('.carousel').slick({  arrows:true,  });});

将设置添加arrows为布尔值（即 true或false）。

对于居中的幻灯片：

$(document).ready(function(){  $('.carousel').slick({  centerMode:true,  });});

用于centerMode 使卡片在视图中居中。

设置幻灯片的速度：

$(document).ready(function(){  $('.carousel').slick({  speed:600,  });});

速度是一个以毫秒为单位的时间整数。

要添加自动播放：

$(document).ready(function(){  $('.carousel').slick({  autoplay:true,  autoplaySpeed:1000,  });});

可以将自动播放添加为布尔值，并且将自动播放速度设置为以毫秒为单位的整数。

对于多张幻灯片：

$(document).ready(function(){  $('.carousel').slick({  slidesToShow: 3,  dots:true,  centerMode: true,  });});

要一次显示多张幻灯片，请设置slidesToShow为整数。

同样，这些只是JS库的基础，但是请参阅文档以获取更多设置选项。

文档地址：https://kenwheeler.github.io/slick/

感谢你的阅读，如果有什么问题，请在留言区给我留言。

5个你想要在项目上使用的JavaScript动画库

1、ScrollReveal

2、Typed.js

3、Anime.js

4、Chart.js

学习更多技能
请点击下方公众号

5个你想要在项目上使用的JavaScript动画库

1、ScrollReveal

2、Typed.js

3、Anime.js

4、Chart.js

学习更多技能请点击下方公众号

学习更多技能
请点击下方公众号