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种








  • 相关阅读:
    hdu 5723 Abandoned country 最小生成树 期望
    OpenJ_POJ C16G Challenge Your Template 迪杰斯特拉
    OpenJ_POJ C16D Extracurricular Sports 打表找规律
    OpenJ_POJ C16B Robot Game 打表找规律
    CCCC 成都信息工程大学游记
    UVALive 6893 The Big Painting hash
    UVALive 6889 City Park 并查集
    UVALive 6888 Ricochet Robots bfs
    UVALive 6886 Golf Bot FFT
    UVALive 6885 Flowery Trails 最短路
  • 原文地址:https://www.cnblogs.com/signheart/p/e9a84afcae0377bbdb11c03f73f78c3f.html
Copyright © 2011-2022 走看看