jQuery产品360度旋转展示代码

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

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

以下是 jQuery产品360度旋转展示代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery产品360度旋转展示代码 </title>
<link href="360show.css" rel="stylesheet" type="text/css">
<script src="jquery.min.js"></script>
<script type="text/javascript" src="360show.js" ></script>
</head>
<body>
<div id="box-wrapper">
  <div class="box-control box-control-left"><a title="顺时针转动" href="javascript:void(0)" class="prev" id="prev"></a></div>
  <div id="mask"><em class="loading">
    <p>loading</p>
    </em></div>
  <div id="box" path_pattern='img/###.png'></div>
  <div id="imgbox"></div>
  <div class="box-control box-control-right"><a title="逆时针转动" href="javascript:void(0)" class="next" id="next"></a></div>
</div>
</body>
</html>

JS代码(360show.js):

/** +------------------------------------------------------------------- * 360展示展品 +------------------------------------------------------------------- * @version 1.0.0 beta * @since 2014.12.12 * @author lee * @site www.sucaijiayuan.com +------------------------------------------------------------------- */
var helloBox ={
	data:{
	pathPattern:false,imgLoaded:0,imgTotal:64,imgArray:[],startPosition:0,imgCurrent:1}
,init:function(){
	helloBox.data.pathPattern = $('#box').attr('path_pattern');
	helloBox.loadingImg();
}
,loadingImg:function(){
	var src = helloBox.data.pathPattern.replace('###',helloBox.data.imgLoaded + 1);
	var img = new Image();
	img.src = src;
	$(img).load(function(){
	helloBox.loadedImg(img);
}
).error(function(){
	$('#mask').find('em.loading p').text("加载失败");
}
)}
,loadedImg:function(img){
	var src = img.src;
	var img = $('<img>').attr('src',src);
	$('#imgbox').append(img);
	helloBox.data.imgArray[++helloBox.data.imgLoaded] = src;
	$('#mask').find('em.loading p').text("Loading" + Math.floor(helloBox.data.imgLoaded / helloBox.data.imgTotal * 100) + "%");
	if (helloBox.data.imgLoaded == helloBox.data.imgTotal){
	$('#mask').animate({
	'filter':'alpha(Opacity=0)','opacity':0}
,300);
	$('#box').html('<img src="' + helloBox.data.imgArray[1] + '" />');
	$('#prev').hover(function(){
	helloBox.timer1 = setInterval(helloBox.preving,30);
}
,function(){
	helloBox.stoppreving();
}
);
	$('#next').hover(function(){
	helloBox.timer2 = setInterval(helloBox.nexting,30);
}
,function(){
	helloBox.stopnexting();
}
);
	$('#mask').bind('mousedown touchstart',function(e){
	if (e.type == "touchstart"){
	helloBox.data.startPosition = window.event.touches[0].pageX;
}
else{
	helloBox.data.startPosition = e.pageX;
}
helloBox.data.touched = true;
	return false;
}
);
	$(document).bind('mouseup touchend',function(){
	helloBox.data.touched = false;
}
);
	$(document).bind('mousemove touchmove',function(e){
	if (helloBox.data.touched){
	if (e.type == "touchmove"){
	var endPosition = window.event.targetTouches[0].pageX;
}
else{
	var endPosition = e.pageX;
}
if (Math.abs(helloBox.data.startPosition - endPosition) >= 4){
	if (helloBox.data.startPosition - endPosition >= 4){
	helloBox.data.imgCurrent++;
	if (helloBox.data.imgCurrent > helloBox.data.imgTotal){
	helloBox.data.imgCurrent = 1;
}
}
else{
	helloBox.data.imgCurrent--;
	if (helloBox.data.imgCurrent < 1){
	helloBox.data.imgCurrent = helloBox.data.imgTotal;
}
}
helloBox.data.startPosition = endPosition;
	$('#box').html('<img src="' + helloBox.data.imgArray[helloBox.data.imgCurrent] + '" />');
}
}
}
);
}
else{
	$('#box').html('<img src="' + src + '" />');
	helloBox.loadingImg();
}
}
,preving:function(){
	helloBox.data.imgCurrent++;
	if (helloBox.data.imgCurrent > helloBox.data.imgTotal){
	helloBox.data.imgCurrent = 1;
}
$('#box').html('<img src="' + helloBox.data.imgArray[helloBox.data.imgCurrent] + '" />');
}
,stoppreving:function(){
	clearInterval(helloBox.timer1);
}
,timer1:function(){
}
,nexting:function(){
	helloBox.data.imgCurrent--;
	if (helloBox.data.imgCurrent < 1){
	helloBox.data.imgCurrent = helloBox.data.imgTotal;
}
$('#box').html('<img src="' + helloBox.data.imgArray[helloBox.data.imgCurrent] + '" />');
}
,stopnexting:function(){
	clearInterval(helloBox.timer2);
}
,timer2:function(){
}
}
;
	$(document).ready(helloBox.init);

CSS代码(360show.css):

*{margin:0;padding:0;border:0;}
body{background:#333;}
#box-wrapper{width:800px;height:600px;overflow:hidden;position:relative;margin:20px auto;}
.box-control{position:absolute;top:270px;z-index:990;width:39px;height:60px;overflow:hidden;}
.box-control-left{left:2px;}
.box-control-right{right:2px;}
.box-control a{position:relative;width:39px;height:60px;display:block;overflow:hidden;opacity:0.2;-moz-opacity:0.2;-khtml-opacity:0.2;filter:alpha(Opacity=20);}
.box-control a:hover{position:relative;width:39px;height:60px;display:block;overflow:hidden;opacity:0.5;-moz-opacity:0.5;-khtml-opacity:0.5;filter:alpha(Opacity=50);}
.box-control a.prev{background:url('icon-btn.png') 0px 0px no-repeat;}
.box-control a.next{background:url('icon-btn.png') -39px 0px no-repeat;}
#mask{position:absolute;z-index:980;width:800px;height:600px;overflow:hidden;*background:#fff;}
#mask em.loading{width:220px;padding:0 0 24px 0;display:block;margin:15px 0 0 290px;background:url('loading.gif') no-repeat left bottom;text-align:center;font-size:12px;color:#888;font-family:Arial;font-style:normal;}
#box{position:absolute;z-index:970;width:800px;height:600px;overflow:hidden;background:url('bg.jpg') no-repeat #fff;}
#box img{width:800px;height:600px;}
#imgbox{position:absolute;z-index:960;display:none;}

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