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>