jQuery产品图片360度旋转插件特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery产品图片360度旋转插件特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>jQuery产品图片360度旋转插件</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/page.css" rel="stylesheet">
<!--[if lt IE 9]>
<script src="js/html5shiv.min.js"></script>
<script src="js/respond.js"></script>
<![endif]-->
</head>
<body>
<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 src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/circlr.min.js"></script>

<script type="text/javascript">
	var crl = circlr('circlr', {
	  scroll : true,
	  loader : 'loader'
	});
</script>
</body>
</html>

JS代码(circlr.min.js):

// Circlr © 2014-2015 Andrey Polischuk github.com/andrepolischuk/circlr!function(){
	"use strict";
	function b(b){
	function p(a,b,c){
	a.addEventListener?a.addEventListener(b,c,!1):a.attachEvent("on"+b,function(){
	c.call(a,window.event)}
)}
function q(a){
	a.preventDefault?a.preventDefault():a.returnValue=!1}
function r(a){
	c=!1,q(a),a="touchstart"===a.type?a.changedTouches[0]:a,i=!0,b.vertical?m.Y=a.clientY-d.offsetTop:m.X=a.clientX-d.offsetLeft}
function s(a){
	return 0>a?a=b.cycle?a+f:0:a>f-1&&(a=b.cycle?a-f:f-1),a}
function t(a){
	if(i){
	q(a),a="touchmove"===a.type?a.changedTouches[0]:a;
	var c=b.vertical?a.clientY-d.offsetTop-m.Y:a.clientX-d.offsetLeft-m.X;
	c=b.reverse?-c:c;
	var e=h/f,g=l;
	c=Math.floor(c/e),c!==l&&(l=s(m.frame+c),g!==l&&(d.getElementsByTagName("img")[g].style.display="none",d.getElementsByTagName("img")[l].style.display="block","function"==typeof n.change&&n.change(l,f)))}
}
function u(a){
	q(a),i=!1,m.frame=l}
function v(a){
	c=!1,q(a);
	var e=a.deltaY||a.detail||-a.wheelDelta;
	e/=Math.abs(e),e=b.reverse?-e:e,l=s(l+e),d.getElementsByTagName("img")[m.frame].style.display="none",d.getElementsByTagName("img")[l].style.display="block",m.frame=l,"function"==typeof n.change&&n.change(l,f)}
function w(){
	if(e&&(e.style.display="none"),0===k.length){
	var a=s(b.start);
	if(d.getElementsByTagName("img")[a].style.display="block",l=a,d.style.position="relative",d.style.width="100%","ontouchstart"in window||"onmsgesturechange"in window)(b.mouse||b.scroll)&&(p(d,"touchstart",r),p(d,"touchmove",t),p(d,"touchend",u));
	else if(b.mouse&&(p(d,"mousedown",r),p(d,"mousemove",t),p(document,"mouseup",u)),b.scroll)for(var f=0;
	f<o.length;
	f++)if("on"+o[f]in window){
	p(d,o[f],v);
	break}
c&&B()}
"function"==typeof n.ready&&n.ready(k)}
function x(a){
	a.onload=function(){
	j.push(this.src),j.length+k.length===f&&w()}
,a.onerror=function(){
	k.push(this.src),j.length+k.length===f&&w()}
,a.onreadystatechange=function(){
	this.onload()}
}
function y(){
	var a;
	e&&(e.style.display="block");
	for(var b=0;
	f>b;
	b++)a=d.getElementsByTagName("img")[b],a.style.display="none",a.style.width="100%",a.setAttribute("src",a.getAttribute("data-src")),a.setAttribute("data-index",b),a.removeAttribute("data-src"),x(a);
	g=g||d.clientHeight,h=h||d.clientWidth}
function z(a){
	d.getElementsByTagName("img")[l].style.display="none",d.getElementsByTagName("img")[a].style.display="block",m.frame=l=a}
b.mouse=b.mouse||!0,b.scroll=b.scroll||!1,b.vertical=b.vertical||!1,b.reverse=b.reverse||!1,b.cycle=b.cycle||!0,b.start=b.start||0,b.speed=b.speed||50;
	var c=b.autoplay||!1;
	b.playSpeed=b.playSpeed||100;
	var d=this.el=b.element;
	d.setAttribute("data-circlr",!0);
	var l,e=b.loader?document.getElementById(b.loader):void 0,f=this.length=d.getElementsByTagName("img").length,g=b.height||void 0,h=b.width||void 0,i=!1,j=[],k=[],m={
}
;
	m.Y=null,m.X=null,m.frame=0;
	var n={
}
;
	n.ready=b.ready||void 0,n.change=b.change||void 0;
	var o=["wheel","mousewheel","scroll","DOMMouseScroll"];
	y();
	var A=this.turn=function(a){
	a=s(a),c=!0,function d(){
	a!==l&&c?(z(s(l>a?l-1:l+1)),setTimeout(d,"undefined"==typeof a?b.playSpeed:b.speed)):a===l&&(m.frame=l=a,c=!1,"function"==typeof n.change&&n.change(l,f))}
()}
;
	this.go=function(a){
	a!==l&&(z(a),"function"==typeof n.change&&n.change(l,f))}
;
	var B=this.play=function(){
	c=!0,A()}
;
	this.stop=function(){
	c=!1}
,this.show=function(){
	d.style.display="block"}
,this.hide=function(){
	d.style.display="none"}
,this.set=function(c){
	for(var e,d=0;
	d<a.length;
	d++)e=a[d],b[e]="undefined"!=typeof c[e]?c[e]:b[e]}
}
function c(a,c){
	return a=document.getElementById(a),a.getAttribute("data-circlr")?void 0:(c=c||{
}
,c.element=a,new b(c))}
var a=["vertical","reverse","cycle","speed","playSpeed"];
	"function"==typeof define&&define.amd?define([],function(){
	return c}
):"undefined"!=typeof module&&module.exports?module.exports=c:this.circlr=c}
.call(this);

JS代码(respond.js):

/*! matchMedia() polyfill - Test a CSS media type/query in JS. Authors & copyright (c) 2012:Scott Jehl,Paul Irish,Nicholas Zakas. Dual MIT/BSD license */
/*! NOTE:If you're already including a window.matchMedia polyfill via Modernizr or otherwise,you don't need this part */
(function(w){
	"use strict";
	w.matchMedia = w.matchMedia || function(doc,undefined){
	var bool,docElem = doc.documentElement,refNode = docElem.firstElementChild || docElem.firstChild,fakeBody = doc.createElement("body"),div = doc.createElement("div");
	div.id = "mq-test-1";
	div.style.cssText = "position:absolute;
	top:-100em";
	fakeBody.style.background = "none";
	fakeBody.appendChild(div);
	return function(q){
	div.innerHTML = '&shy;
	<style media="' + q + '"> #mq-test-1{
	width:42px;
}
</style>';
	docElem.insertBefore(fakeBody,refNode);
	bool = div.offsetWidth === 42;
	docElem.removeChild(fakeBody);
	return{
	matches:bool,media:q}
;
}
;
}
(w.document);
}
)(this);
	/*! Respond.js v1.4.0:min/max-width media query polyfill. (c) Scott Jehl. MIT Lic. j.mp/respondjs */
(function(w){
	"use strict";
	var respond ={
}
;
	w.respond = respond;
	respond.update = function(){
}
;
	var requestQueue = [],xmlHttp = function(){
	var xmlhttpmethod = false;
	try{
	xmlhttpmethod = new w.XMLHttpRequest();
}
catch (e){
	xmlhttpmethod = new w.ActiveXObject("Microsoft.XMLHTTP");
}
return function(){
	return xmlhttpmethod;
}
;
}
(),ajax = function(url,callback){
	var req = xmlHttp();
	if (!req){
	return;
}
req.open("GET",url,true);
	req.onreadystatechange = function(){
	if (req.readyState !== 4 || req.status !== 200 && req.status !== 304){
	return;
}
callback(req.responseText);
}
;
	if (req.readyState === 4){
	return;
}
req.send(null);
}
;
	respond.ajax = ajax;
	respond.queue = requestQueue;
	respond.regex ={
	media:/@media[^\{
	]+\{
	([^\{
	\}
]*\{
	[^\}
\{
	]*\}
)+/gi,keyframes:/@(?:\-(?:o|moz|webkit)\-)?keyframes[^\{
	]+\{
	(?:[^\{
	\}
]*\{
	[^\}
\{
	]*\}
)+[^\}
]*\}
/gi,urls:/(url\()['"]?([^\/\)'"][^:\)'"]+)['"]?(\))/g,findStyles:/@media *([^\{
	]+)\{
	([\S\s]+?)$/,only:/(only\s+)?([a-zA-Z]+)\s?/,minw:/\([\s]*min\-width\s*:[\s]*([\s]*[0-9\.]+)(px|em)[\s]*\)/,maxw:/\([\s]*max\-width\s*:[\s]*([\s]*[0-9\.]+)(px|em)[\s]*\)/}
;
	respond.mediaQueriesSupported = w.matchMedia && w.matchMedia("only all") !== null && w.matchMedia("only all").matches;
	if (respond.mediaQueriesSupported){
	return;
}
var doc = w.document,docElem = doc.documentElement,mediastyles = [],rules = [],appendedEls = [],parsedSheets ={
}
,resizeThrottle = 30,head = doc.getElementsByTagName("head")[0] || docElem,base = doc.getElementsByTagName("base")[0],links = head.getElementsByTagName("link"),lastCall,resizeDefer,eminpx,getEmValue = function(){
	var ret,div = doc.createElement("div"),body = doc.body,originalHTMLFontSize = docElem.style.fontSize,originalBodyFontSize = body && body.style.fontSize,fakeUsed = false;
	div.style.cssText = "position:absolute;
	font-size:1em;
	width:1em";
	if (!body){
	body = fakeUsed = doc.createElement("body");
	body.style.background = "none";
}
docElem.style.fontSize = "100%";
	body.style.fontSize = "100%";
	body.appendChild(div);
	if (fakeUsed){
	docElem.insertBefore(body,docElem.firstChild);
}
ret = div.offsetWidth;
	if (fakeUsed){
	docElem.removeChild(body);
}
else{
	body.removeChild(div);
}
docElem.style.fontSize = originalHTMLFontSize;
	if (originalBodyFontSize){
	body.style.fontSize = originalBodyFontSize;
}
ret = eminpx = parseFloat(ret);
	return ret;
}
,applyMedia = function(fromResize){
	var name = "clientWidth",docElemProp = docElem[name],currWidth = doc.compatMode === "CSS1Compat" && docElemProp || doc.body[name] || docElemProp,styleBlocks ={
}
,lastLink = links[links.length - 1],now = new Date().getTime();
	if (fromResize && lastCall && now - lastCall < resizeThrottle){
	w.clearTimeout(resizeDefer);
	resizeDefer = w.setTimeout(applyMedia,resizeThrottle);
	return;
}
else{
	lastCall = now;
}
for (var i in mediastyles){
	if (mediastyles.hasOwnProperty(i)){
	var thisstyle = mediastyles[i],min = thisstyle.minw,max = thisstyle.maxw,minnull = min === null,maxnull = max === null,em = "em";
	if (!!min){
	min = parseFloat(min) * (min.indexOf(em) > -1 ? eminpx || getEmValue():1);
}
if (!!max){
	max = parseFloat(max) * (max.indexOf(em) > -1 ? eminpx || getEmValue():1);
}
if (!thisstyle.hasquery || (!minnull || !maxnull) && (minnull || currWidth >= min) && (maxnull || currWidth <= max)){
	if (!styleBlocks[thisstyle.media]){
	styleBlocks[thisstyle.media] = [];
}
styleBlocks[thisstyle.media].push(rules[thisstyle.rules]);
}
}
}
for (var j in appendedEls){
	if (appendedEls.hasOwnProperty(j)){
	if (appendedEls[j] && appendedEls[j].parentNode === head){
	head.removeChild(appendedEls[j]);
}
}
}
appendedEls.length = 0;
	for (var k in styleBlocks){
	if (styleBlocks.hasOwnProperty(k)){
	var ss = doc.createElement("style"),css = styleBlocks[k].join("\n");
	ss.type = "text/css";
	ss.media = k;
	head.insertBefore(ss,lastLink.nextSibling);
	if (ss.styleSheet){
	ss.styleSheet.cssText = css;
}
else{
	ss.appendChild(doc.createTextNode(css));
}
appendedEls.push(ss);
}
}
}
,translate = function(styles,href,media){
	var qs = styles.replace(respond.regex.keyframes,"").match(respond.regex.media),ql = qs && qs.length || 0;
	href = href.substring(0,href.lastIndexOf("/"));
	var repUrls = function(css){
	return css.replace(respond.regex.urls,"$1" + href + "$2$3");
}
,useMedia = !ql && media;
	if (href.length){
	href += "/";
}
if (useMedia){
	ql = 1;
}
for (var i = 0;
	i < ql;
	i++){
	var fullq,thisq,eachq,eql;
	if (useMedia){
	fullq = media;
	rules.push(repUrls(styles));
}
else{
	fullq = qs[i].match(respond.regex.findStyles) && RegExp.$1;
	rules.push(RegExp.$2 && repUrls(RegExp.$2));
}
eachq = fullq.split(",");
	eql = eachq.length;
	for (var j = 0;
	j < eql;
	j++){
	thisq = eachq[j];
	mediastyles.push({
	media:thisq.split("(")[0].match(respond.regex.only) && RegExp.$2 || "all",rules:rules.length - 1,hasquery:thisq.indexOf("(") > -1,minw:thisq.match(respond.regex.minw) && parseFloat(RegExp.$1) + (RegExp.$2 || ""),maxw:thisq.match(respond.regex.maxw) && parseFloat(RegExp.$1) + (RegExp.$2 || "")}
);
}
}
applyMedia();
}
,makeRequests = function(){
	if (requestQueue.length){
	var thisRequest = requestQueue.shift();
	ajax(thisRequest.href,function(styles){
	translate(styles,thisRequest.href,thisRequest.media);
	parsedSheets[thisRequest.href] = true;
	w.setTimeout(function(){
	makeRequests();
}
,0);
}
);
}
}
,ripCSS = function(){
	for (var i = 0;
	i < links.length;
	i++){
	var sheet = links[i],href = sheet.href,media = sheet.media,isCSS = sheet.rel && sheet.rel.toLowerCase() === "stylesheet";
	if (!!href && isCSS && !parsedSheets[href]){
	if (sheet.styleSheet && sheet.styleSheet.rawCssText){
	translate(sheet.styleSheet.rawCssText,href,media);
	parsedSheets[href] = true;
}
else{
	if (!/^([a-zA-Z:]*\/\/)/.test(href) && !base || href.replace(RegExp.$1,"").split("/")[0] === w.location.host){
	if (href.substring(0,2) === "//"){
	href = w.location.protocol + href;
}
requestQueue.push({
	href:href,media:media}
);
}
}
}
}
makeRequests();
}
;
	ripCSS();
	respond.update = ripCSS;
	respond.getEmValue = getEmValue;
	function callMedia(){
	applyMedia(true);
}
if (w.addEventListener){
	w.addEventListener("resize",callMedia,false);
}
else if (w.attachEvent){
	w.attachEvent("onresize",callMedia);
}
}
)(this);

CSS代码(page.css):

body{background-color:#fff;padding-top:50px;padding-bottom:50px;}
#circlr{cursor:move;margin:0 auto;min-height:100px;position:relative;}
#circlr #loader{background:url(../images/loader.gif) center center no-repeat;bottom:0;display:none;left:0;position:absolute;right:0;top:0;}

附件:下载该文件资源,减少时间成本(增值服务)