基于 html5的 jquery 轮播插件 flickerplate

https://github.com/chrishumboldt/Flickerplate

官网


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

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


 <div class="lb_container" style="height: 200px;">
          <ul>
              <c:forEach items="${requestScope.housephotoes}" var="housev">
                  <li data-background="${housev.APPPHOTOURL}">
                  </li>
              </c:forEach>

          </ul>
      </div>

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

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

最新版初始化


new flickerplate({
    selector: '.lb_container',
    animation: 'transition-fade',
    autoFlick: false,
    dotAlignment: 'right',
    theme: 'dark'
});

api 解释还没有中文

Name	Default	Options	Description
animation	transform-slide	transform-slide, transform-slide, transition-fade, transition-slide	Choose the animation type you want.
arrows	true	true, false	Arrows are used to navigate back and forth between the flicks.
arrowsConstraint	false	true, false	When 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.
autoFlick	true	true, false	Sets the flick to run automatically. A manual flick resets the delay.
autoFlickDelay	10		Set the delay (in seconds) between each auto flick.
dotAlignment	center	center, left, right	Set the horizontal alignment of the dot navigation.
dots	true	true, false	Dot navigation is used to indicate and navigate between the flicks.
position	1		Set the starting flick.
theme	light	light, dark	Currently 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种

基于 html5的 jquery 轮播插件 flickerplate

相关推荐