1. 引入CSS
<link href="css/bootstrap.min.css" rel="stylesheet"> <link href="css/page.css" rel="stylesheet">
2. 引入JS
<script src="js/html5shiv.min.js"></script> <script src="js/respond.js"></script> <script src="js/jquery.min.js"></script> <script src="js/bootstrap.min.js"></script> <script src="js/circlr.min.js"></script>
3. HTML代码
<div class="container pb30"> <div class="row"> <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1 col-sm-12"> <div class="panel panel-default"> <div class="panel-body"> <div id="circlr"> <img data-src="picture/00.jpg"> <img data-src="picture/01.jpg"> <img data-src="picture/02.jpg"> <img data-src="picture/03.jpg"> <img data-src="picture/04.jpg"> <img data-src="picture/05.jpg"> <img data-src="picture/06.jpg"> <img data-src="picture/07.jpg"> <img data-src="picture/08.jpg"> <img data-src="picture/09.jpg"> <img data-src="picture/10.jpg"> <img data-src="picture/11.jpg"> <img data-src="picture/12.jpg"> <img data-src="picture/13.jpg"> <img data-src="picture/14.jpg"> <img data-src="picture/15.jpg"> <div id="loader"></div> </div> </div> </div> <div class="col-sm-3 text-center"> <h4>循环</h4> <p> <div class="btn-group" data-toggle="buttons"> <label class="btn btn-default" onClick="crl.set({ cycle : false });"> <input type="radio" name="vertical"> NO </label> <label class="btn btn-default active" onClick="crl.set({ cycle : true });"> <input type="radio" name="vertical" checked> Yes </label> </div> </p> </div> <div class="col-sm-3 text-center"> <h4>反转</h4> <p> <div class="btn-group" data-toggle="buttons"> <label class="btn btn-default active" onClick="crl.set({ reverse : false });"> <input type="radio" name="vertical" checked> NO </label> <label class="btn btn-default" onClick="crl.set({ reverse : true });"> <input type="radio" name="vertical"> Yes </label> </div> </p> </div> <div class="col-sm-6 text-center"> <h4>方向</h4> <p> <div class="btn-group" data-toggle="buttons"> <label class="btn btn-default active" onClick="crl.set({ vertical : false });"> <input type="radio" name="vertical" checked> 水平 </label> <label class="btn btn-default" onClick="crl.set({ vertical : true });"> <input type="radio" name="vertical"> 垂直 </label> </div> </p> </div> <div class="col-sm-4 text-center"> <h4>动画旋转</h4> <p> <a href="#" class="btn btn-default" onClick="crl.turn(9); return false;">第10帧</a> <a href="#" class="btn btn-default" onClick="crl.turn(0); return false;">第1帧</a> </p> </div> <div class="col-sm-4 text-center"> <h4>显示</h4> <p> <a href="#" class="btn btn-default" onClick="crl.go(9); return false;">第10帧</a> <a href="#" class="btn btn-default" onClick="crl.go(0); return false;">第1帧</a> </p> </div> <div class="col-sm-4 text-center"> <h4>自动播放</h4> <p> <a href="#" class="btn btn-default" onClick="crl.play(); return false;">开始</a> <a href="#" class="btn btn-default" onClick="crl.stop(); return false;">停止</a> </p> </div> </div> </div> </div> <script type="text/javascript"> var crl = circlr('circlr', { scroll : true, loader : 'loader' }); </script>