适合移动触摸设备的全屏jquery图片轮播插件

当前位置:主页 > jQuery库 > 幻灯片和轮播图 > 适合移动触摸设备的全屏jquery图片轮播插件
适合移动触摸设备的全屏jquery图片轮播插件
分享:

    插件介绍

    Flickerplate是一款非常适合于在移动触摸设备上使用的jquery图片轮播插件。它具有高度可定制性、兼容性好等特点。是移动触摸设备焦点图的首选。

    浏览器兼容性

    浏览器兼容性
    时间:2014-10-22
    阅读:

简要教程

Flickerplate是一个jquery图片轮播插件。使用时需要使用Modernizr来做触摸检测,所以必须引入jQuery和Modernizr。

引入必要的js文件和css文件

<head>
    // Required javascript
    <script src="js/min/jquery-v1.10.2.min.js"></script>
    <script src="js/min/modernizr-custom-v2.7.1.min.js"></script>
    <script src="js/min/jquery-finger-v0.1.0.min.js"></script>
    
    // Flickerplate
    <script src="js/min/flickerplate.min.js"></script>
    <link href="css/flickerplate.css" rel="stylesheet" type="text/css">
</head>               
                

HTML结构

<div class="flicker-example">
    <ul>
        <li>
            <div class="flick-title">Title 1</div>
            <div class="flick-sub-text">Text line 1</div>
        </li>
        <li>
            <div class="flick-title">Title 2</div>
            <div class="flick-sub-text">Text line 2</div>
        </li>
        <li>
            <div class="flick-title">Title 3</div>
            <div class="flick-sub-text">Text line 3</div>
        </li>
    </ul>
</div>
                

调用方法

<script>
    $(document).ready(function(){
        $(".flicker-example").flicker();
    });
</script>              
                

更多信息:http://getwebplate.com/plugins/flickerplate