简介
Swively 是一个能让你在页面上快速生成 360 度旋转的图片的 npm 包。使用 swively 可以方便、快捷地创建这样的交互效果，提高网页设计的美感和吸引力。
安装
安装 swively，需要先安装 node.js，然后在终端中输入以下命令：
--- ------- -------
使用
使用 swively 只需要一个容器和一张图片。以下是一个基本的使用教程，可以让你简单地实现旋转图片的效果。
DOM
首先，我们需要在页面上创建一个容器，并赋予它一个 id，方便之后操作。
---- -----------------------------
CSS
接下来，我们需要对容器进行一下样式设置，使之具有宽度和高度，且图片不会超出容器。
------------------ - ------ ----- ------- ------ --------- ------- -
JS
最后，我们需要在 js 中引入 swively 包，加载一张图片，并使用 swively 相关的方法实现图片的旋转效果。
------ ------- ---- ----------
----- --------- - ---------------------------------------------
----- ----- - --- --------
------------ - ---------- -
----- ------- - --- ------------------ ------ -
------------- --- -- ----
----- ------------ -- ----
--------------- ---------- -
-------------------- -- ---------
-
---
----------------
-
--------- - ------------------这里，我们引入了 swively 包，并创建了一个 Swively 类的实例，将容器、图片、以及相关配置项传入。
我们设定图片数量为 36，路径为 /img/360/，并在 loadedCallback 回调函数中输出信息。
最后调用 swively.start() 方法，就可以让图片开始旋转。
配置项
使用 swively，可以通过配置项来实现更加丰富的效果。
以下是 swively 配置项的详细说明：
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| imagesAmount | number | 24 | 360 度旋转所需图片数量 |
| path | string | ./ | 图片路径 |
| fileExt | string | jpg | 图片文件扩展名 |
| step | number | 10 | 图片旋转步长 |
| speed | number | 8 | 每秒旋转速度 |
| reverse | boolean | false | 是否开启逆时针旋转 |
| draggable | boolean | true | 是否开启鼠标拖拽 |
其余的配置项参考官方文档。
总结
通过本文，我们学习了 npm 包 swively 的使用方法，其中包括安装、使用 DOM、CSS 和 JS 三个步骤，以及配置项的详细说明。希望通过这篇文章，读者可以更好地掌握 swively，为网站设计带来更加丰富的效果。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/600668edd9381d61a3540cb4