jQuery产品图片360度旋转特效代码下载

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>