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

基于 html5的 jquery 轮播插件 flickerplate

孟自强
2023-12-01
https://github.com/chrishumboldt/Flickerplate

官网


 
   
  1. <link href="${baseURL}/themes/default/css/flickerplate.css" rel="stylesheet" type="text/css">
  2. <script src="${baseURL}/themes/default/js/hammer-v2.0.3.js"></script>
  3. <script src="${baseURL}/themes/default/js/flickerplate.js"></script>

引入上面3个   hammer-v是响应式用到的支持触控


 
   
  1. <div class="lb_container" style="height: 200px;">
  2. <ul>
  3. <c:forEach items="${requestScope.housephotoes}" var="housev">
  4. <li data-background="${housev.APPPHOTOURL}">
  5. </li>
  6. </c:forEach>
  7. </ul>
  8. </div>

上面是设置背景图片的  ,  官网只提供了设置普通文字 , 只是在li 下面加两个标签即可


<li data-background="image-url.jpg">
            <div class="flick-title">Example Heading</div>
            <div class="flick-sub-text">Sub Text</div>
        </li>


最新版初始化

 
   
  1. new flickerplate({
  2. selector: '.lb_container',
  3. animation: 'transition-fade',
  4. autoFlick: false,
  5. dotAlignment: 'right',
  6. theme: 'dark'
  7. });


api 解释还没有中文


NameDefaultOptionsDescription
animationtransform-slidetransform-slide, transform-slide, transition-fade, transition-slideChoose the animation type you want.
arrowstruetrue, falseArrows are used to navigate back and forth between the flicks.
arrowsConstraintfalsetrue, falseWhen you get to the end of the flicks pressing the next arrow will navigate you to the beginning again should you have a false constraint. The same applies to the previous arrow.
autoFlicktruetrue, falseSets the flick to run automatically. A manual flick resets the delay.
autoFlickDelay10Set the delay (in seconds) between each auto flick.
dotAlignmentcentercenter, left, rightSet the horizontal alignment of the dot navigation.
dotstruetrue, falseDot navigation is used to indicate and navigate between the flicks.
position1Set the starting flick.
themelightlight, darkCurrently two options, light and dark. This will set the font colour, block text colour, arrows and dots to either dark or light.

但是有原版的解释  对照参考即可

属性/方法类型默认值说明
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动画切换方式,可选 transition-slide、transform-slide、jquery-slide、scroller-slide 4种
flick_position整数1
inner_width布尔值false
theme字符串light设置主题,可选 light、dark 2种








 类似资料: