简介
saparallax 是一个基于 jQuery 的轮播插件,它支持多种动画效果,包括平移、淡入淡出、缩放、旋转等效果,还可以设置延迟等参数,支持自动轮播和手动触发轮播。
安装
使用 npm 进行安装:
--- ------- ----------
使用
加载
在 html 页面中引入 jQuery 和 saparallax:
------- ----------------------------------------------------------- ------- ------------------------------------------------------------------------------------
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
跳转到指定的轮播项,参数为轮播项的索引值:
------------------------------------ ---
play
开始自动轮播:
-------------------------------------
pause
暂停自动轮播:
--------------------------------------
prev
上一个轮播项:
-------------------------------------
next
下一个轮播项:
-------------------------------------
示例代码
1. 平移效果
------- ------------ - --------- --------- ------ ------ ------- ------ - -------------- - --------- --------- ------ ----- ------- ----- ---- -- ----- -- -------- -- ----------- ------- ----- --------- ----- - --------------------- - -------- -- - ------------------- - ---------- ------------------ - ------------------- - ---------- ----------------- - -------- ---- ----------------- ---- ---------------------- ---- -------------------------------------------- ------ ---- ---------------------- ---- -------------------------------------------- ------ ---- ---------------------- ---- -------------------------------------------- ------ ------ ------- ----------------------------------------------------------- ------- ------------------------------------------------------------------------------------ -------- ---------------------------- - ------------------------------ ---------- -------- --------- ----- ------ ----- ----- -------- --- --- ---------
2. 淡入淡出效果
------- ------------ - --------- --------- ------ ------ ------- ------ - -------------- - --------- --------- ------ ----- ------- ----- ---- -- ----- -- -------- -- ----------- ------- ----- --------- ----- - --------------------- - -------- -- - ------------------- - ---------- ------------------ - ------------------- - ---------- ----------------- - -------- ---- ----------------- ---- ---------------------- ---- -------------------------------------------- ------ ---- ---------------------- ---- -------------------------------------------- ------ ---- ---------------------- ---- -------------------------------------------- ------ ------ ------- ----------------------------------------------------------- ------- ------------------------------------------------------------------------------------ -------- ---------------------------- - ------------------------------ ---------- ------- --------- ----- ------ ----- ----- -------- --- --- ---------
3. 缩放效果
------- ------------ - --------- --------- ------ ------ ------- ------ - -------------- - --------- --------- ------ ----- ------- ----- ---- -- ----- -- -------- -- ----------- ------- ----- --------- ----- - --------------------- - -------- -- - ------------------- - ---------- ----------- - ------------------- - ---------- ----------- - -------- ---- ----------------- ---- ---------------------- ---- -------------------------------------------- ------ ---- ---------------------- ---- -------------------------------------------- ------ ---- ---------------------- ---- -------------------------------------------- ------ ------ ------- ----------------------------------------------------------- ------- ------------------------------------------------------------------------------------ -------- ---------------------------- - ------------------------------ ---------- -------- --------- ----- ------ ----- ----- -------- --- --- ---------
4. 旋转效果
------- ------------ - --------- --------- ------ ------ ------- ------ - -------------- - --------- --------- ------ ----- ------- ----- ---- -- ----- -- -------- -- ----------- ------- ----- --------- ----- - --------------------- - -------- -- - ------------------- - ---------- ---------------- - ------------------- - ---------- --------------- - -------- ---- ----------------- ---- ---------------------- ---- -------------------------------------------- ------ ---- ---------------------- ---- -------------------------------------------- ------ ---- ---------------------- ---- -------------------------------------------- ------ ------ ------- ----------------------------------------------------------- ------- ------------------------------------------------------------------------------------ -------- ---------------------------- - ------------------------------ ---------- --------- --------- ----- ------ ----- ----- -------- --- --- ---------
总结
saparallax 是一款功能强大的 jQuery 轮播插件,它不仅支持多种动画效果,还可以自定义参数和事件回调函数,非常方便灵活。建议在项目中尝试使用,相信会给你带来不一样的体验。
来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/600562ff81e8991b448e0cff