zoukankan      html  css  js  c++  java
  • 基于 html5的 jquery 轮播插件 flickerplate

    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种








  • 相关阅读:
    [转]好习惯养成的10个步骤
    模拟资料
    [转]暗时间
    [转]30个小改变,造就你的卓越人生
    [转]Word 2007文档中图片不显示或对象不显示的解决方法
    ubuntu 10.04 安转2.6.38内核
    [转]可以让你少奋斗10年的工作经验
    [转]Vim 复制粘帖格式错乱问题的解决办法
    C# 获取类中所有的属性
    sql 脚本
  • 原文地址:https://www.cnblogs.com/signheart/p/e9a84afcae0377bbdb11c03f73f78c3f.html
Copyright © 2011-2022 走看看