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