添加jquery.skippr.css、jquery.skippr.js和jquery库到你页面的head位置。
注意jquery.skippr.css一定要添加到jquery.skippr.js之前
<head> <title>Your Awesome Website</title> <link rel="stylesheet" href="css/jquery.skippr.css"> </head> <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script> <script src="skippr/js/jquery.skippr.js"></script>
创建一个div元素用于每个幻灯片,并添加一个背景图像和css或样式属性。Skippr目标div标签内的所选元素background-images应用。把这个目标元素在一个容器元素的风格和定位。目标元素将完全填满它的父容器元素。
<div id="random"> <div class="yellow"></div> <div style="background-image: url(img/test2.jpg)"></div> <div style="background-image: url(img/test5.jpg)"></div> <div style="background-image: url(img/test3.jpg)"></div> <div style="background-image: url(img/test4.jpg)"></div> </div>
调用插件关联对应的id
<script> $(document).ready(function() { $("#random").skippr(); $("#random2").skippr({ navType: 'bubble', autoPlay: true, autoPlayDuration: 2000 }); }); </script>