当前位置: 首页 > 工具软件 > Flickerplate > 使用案例 >

jQuery Flickerplate 幻灯片

赖俊
2023-12-01

Flickerplate 是个轻量级 jQuery 插件,大小仅为 12 kb。它允许用户点击鼠标然后转换内容,非常容易使用,响应式,支持触摸设备

在线实例

默认圆点导航位置动画方式深色主题HTML data属性

使用方法

  1. <div class="flicker-example"> 
  2.     <ul> 
  3.         <li data-background="img/field.jpg"> 
  4.             <div class="flick-title">Flickerplate</div> 
  5.             <div class="flick-sub-text">——小巧的jQuery幻灯片插件</div> 
  6.         </li> 
  7.         <li data-background="img/forest.jpg"> 
  8.             <div class="flick-title">可修改 Javascript 或 CSS</div> 
  9.             <div class="flick-sub-text">查看参数,看看如何修改成你需要的效果</div> 
  10.         </li> 
  11.         <li data-background="img/frozen-water.jpg"> 
  12.             <div class="flick-title">触摸事件</div> 
  13.             <div class="flick-sub-text">引入 jQuery Finger 插件可支持移动设备触摸事件</div> 
  14.         </li> 
  15.     </ul> 
  16. </div>
复制
  1. $(function() { 
  2.     $('.flicker-example').flicker(); 
  3. });
复制

参数详解

参数描述默认值
arrows显示左右箭头控制true
arrows_constraint左右到头了禁止点击false
auto_flick自动播放true
auto_flick_delay自动播放间隔,以秒为单位10
block_text文字显示背景阴影true
dot_navigation显示圆点导航true
dot_alignment圆点导航位置center
flick_animation动画切换方式,可选 transition-slide、transform-slide、jquery-slide、scroller-slide 4种transition-slide

flick_position

inner_width

theme设置主题,可选 light、dark 2种light

 

 类似资料: