360度产品展示,js+图片-freejs.net代码演示

首页>>Jquery图片>>360度产品展示,js+图片(2014-06-28)

360度产品展示,js+图片

图片是37张，路径在下面的代码里面，index从1到37，相当于每10度一张图片.

XML/HTML Code

<div id="threesixty" image_count='37' path_pattern='http://www.vivo.com.cn/vivo/xplay3s/360/img-white/white#index#.jpg' end_frame='74' scale='1' fix_width='400' fix_height='400' max_width='400' max_height='400'>
<em class="loading"><p>0%</p></em>.
<ol></ol>
</div>

CSS Code

#threesixty{position:absolute;overflow:hidden;top:70px;left:0;width:100%;height:100%; }
#threesixty ol{display: none;}
#threesixty img{position:absolute;top:0;width:100%;height:auto;}
.current-image{visibility:visible;width:100%;}
.previous-image{visibility:hidden;width:0;}
#threesixty .loading{position:absolute;left:50%;top:50%;width:90px;height:90px;margin-left:-45px;margin-top:-50px;display:none;}
#threesixty .loading span{position:absolute;top:50%;width:100%;color:#333;font-size:12px;font-family:Arial, Verdana, sans;text-align:center;line-height:1em;margin-top:-0.5em;}
#threesixty em.loading{width:55px;padding:40px 0 0 0;display:block;position:absolute;top:50%;left:50%;margin:-27px 0 0 -27px;background:url(images/loading-ico.gif) no-repeat 10px 0;z-index:999999;text-align:center;font-size:12px;color:#219edf;font-family:Arial;font-style:normal;}