简介
saparallax 是一个基于 jQuery 的轮播插件，它支持多种动画效果，包括平移、淡入淡出、缩放、旋转等效果，还可以设置延迟等参数，支持自动轮播和手动触发轮播。
安装
使用 npm 进行安装：
npm install saparallax使用
加载
在 html 页面中引入 jQuery 和 saparallax：
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/saparallax@1.0.0/dist/saparallax.min.js"></script>
HTML 结构
添加一个包含多个轮播项的容器：
-- -------------------- ---- ------- ---- ----------------- ---- ---------------------- ---- ----------------- ---- -------------------------------- ------- ------ ---- ---------------------- ---- ----------------- ---- -------------------------------- ------- ------ ---- ---------------------- ---- ----------------- ---- -------------------------------- ------- ------ ------展开代码
轮播项样式
需要对轮播项设置宽度和高度，并使用 position: absolute 定位：
-- -------------------- ---- ------- ------------ - --------- --------- ------ ------ ------- ------ - -------------- - --------- --------- ------ ----- ------- ----- ---- -- ----- -- -------- -- ----------- ------- ----- - --------------------- - -------- -- - ------------------- - ----- ----- - ------------------- - ----- ------ -展开代码
初始化
在页面加载完成后，使用 jQuery 初始化 saparallax：
-- -------------------- ---- ------- ---------------------------- - ------------------------------ ---------- -------- ------ ----- --------- ---- ------- --------- --------- ----- ------ ----- --------- ------ ------ ----- ----------- ------ --------- ------ ------ ------ ------- ---------- --- -------- ---------- --- -------- ---------- --- --------- ---------- --- ------- ---------- --- ------ ---------- --- --------- ---------- -- --- ---展开代码
参数说明
| 参数名 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| animation | string | slide | 轮播动画效果，可选值为 slide、fade、scale、rotate |
| delay | integer | 0 | 自动轮播延迟时间（毫秒），0 表示不延迟 |
| duration | integer | 500 | 轮播动画持续时间（毫秒） |
| easing | string | swing | 轮播动画缓动函数，可选值为 linear、swing、easeInQuad 等 |
| autoplay | boolean | true | 是否自动轮播 |
| speed | integer | 3000 | 自动轮播时每次轮播的间隔时间（毫秒） |
| keyboard | boolean/object | false | 是否支持键盘控制，支持方向键和空格键，也可以自定义键盘控制 |
| pause | boolean | true | 鼠标悬停时是否暂停轮播 |
| indicators | boolean | true | 是否显示指示器 |
| navigate | boolean | true | 是否显示导航前进后退按钮 |
| thumb | boolean | false | 是否显示缩略图 |
| oninit | function | null | 初始化事件 |
| onstart | function | null | 轮播开始事件 |
| onpause | function | null | 轮播暂停事件 |
| onresume | function | null | 轮播继续事件 |
| onstop | function | null | 轮播停止事件 |
| onend | function | null | 轮播结束事件 |
| onchange | function | null | 轮播项改变事件 |
方法
goTo
跳转到指定的轮播项，参数为轮播项的索引值：
$("#my-carousel").saparallax("goTo", 2);
play
开始自动轮播：
$("#my-carousel").saparallax("play");
pause
暂停自动轮播：
$("#my-carousel").saparallax("pause");
prev
上一个轮播项：
$("#my-carousel").saparallax("prev");
next
下一个轮播项：
$("#my-carousel").saparallax("next");
示例代码
1. 平移效果
-- -------------------- ---- ------- ------- ------------ - --------- --------- ------ ------ ------- ------ - -------------- - --------- --------- ------ ----- ------- ----- ---- -- ----- -- -------- -- ----------- ------- ----- --------- ----- - --------------------- - -------- -- - ------------------- - ---------- ------------------ - ------------------- - ---------- ----------------- - -------- ---- ----------------- ---- ---------------------- ---- -------------------------------------------- ------ ---- ---------------------- ---- -------------------------------------------- ------ ---- ---------------------- ---- -------------------------------------------- ------ ------ ------- ----------------------------------------------------------- ------- ------------------------------------------------------------------------------------ -------- ---------------------------- - ------------------------------ ---------- -------- --------- ----- ------ ----- ----- -------- --- --- ---------展开代码
2. 淡入淡出效果
-- -------------------- ---- ------- ------- ------------ - --------- --------- ------ ------ ------- ------ - -------------- - --------- --------- ------ ----- ------- ----- ---- -- ----- -- -------- -- ----------- ------- ----- --------- ----- - --------------------- - -------- -- - ------------------- - ---------- ------------------ - ------------------- - ---------- ----------------- - -------- ---- ----------------- ---- ---------------------- ---- -------------------------------------------- ------ ---- ---------------------- ---- -------------------------------------------- ------ ---- ---------------------- ---- -------------------------------------------- ------ ------ ------- ----------------------------------------------------------- ------- ------------------------------------------------------------------------------------ -------- ---------------------------- - ------------------------------ ---------- ------- --------- ----- ------ ----- ----- -------- --- --- ---------展开代码
3. 缩放效果
-- -------------------- ---- ------- ------- ------------ - --------- --------- ------ ------ ------- ------ - -------------- - --------- --------- ------ ----- ------- ----- ---- -- ----- -- -------- -- ----------- ------- ----- --------- ----- - --------------------- - -------- -- - ------------------- - ---------- ----------- - ------------------- - ---------- ----------- - -------- ---- ----------------- ---- ---------------------- ---- -------------------------------------------- ------ ---- ---------------------- ---- -------------------------------------------- ------ ---- ---------------------- ---- -------------------------------------------- ------ ------ ------- ----------------------------------------------------------- ------- ------------------------------------------------------------------------------------ -------- ---------------------------- - ------------------------------ ---------- -------- --------- ----- ------ ----- ----- -------- --- --- ---------展开代码
4. 旋转效果
-- -------------------- ---- ------- ------- ------------ - --------- --------- ------ ------ ------- ------ - -------------- - --------- --------- ------ ----- ------- ----- ---- -- ----- -- -------- -- ----------- ------- ----- --------- ----- - --------------------- - -------- -- - ------------------- - ---------- ---------------- - ------------------- - ---------- --------------- - -------- ---- ----------------- ---- ---------------------- ---- -------------------------------------------- ------ ---- ---------------------- ---- -------------------------------------------- ------ ---- ---------------------- ---- -------------------------------------------- ------ ------ ------- ----------------------------------------------------------- ------- ------------------------------------------------------------------------------------ -------- ---------------------------- - ------------------------------ ---------- --------- --------- ----- ------ ----- ----- -------- --- --- ---------展开代码
总结
saparallax 是一款功能强大的 jQuery 轮播插件，它不仅支持多种动画效果，还可以自定义参数和事件回调函数，非常方便灵活。建议在项目中尝试使用，相信会给你带来不一样的体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600562ff81e8991b448e0cff
