淘宝店铺装修360度宝贝全景展示代码

核心是你要有图片素材，稍微调用了轮播配置即可实现 。   代码直接复制进自定义模块即可测试 。  本代码中对图片 360°的角度切割 ，拼接起来就是全景展示。 图片较多，需要缓冲一会儿才可以显示全 。

360°切片成 72个图片。  工作量好大的说， 有兴趣的可以拿去玩玩。

1. <div class="J_TWidget" data-widget-config="{'contentCls': 'JMLB-8','navCls': 'JMNB-8','effect': 'none','easing': 'easeInStrong','prevBtnCls':'JM-PREV','nextBtnCls':'JM-NEXT','autoplay': true,'viewSize':[640],'circular': true,'duration':0.5,'activeTriggerCls':'.ABCD','interval':0.1,}" data-widget-type="Carousel" style="float:left;height:400px; position:relative;">
   
2. 
   
3. <div class="footer-more-trigger" style=" width:640px; height:378px; overflow:hidden; padding:0;border: 4px solid #FFF;
   
4. 
   
5. opacity: 0.9; top:0px; left:0px;">
   
6. 
   
7. 
   
8.     <div  class="JMLB-8">
   
9. 
   
10.         
    
11. 
    
12.          
    
13. 
    
14.       <div class="box1" style="width:640px; height:378px; background:red;"><img data-ks-lazyload="http://img03.taobaocdn.com/imgextra/i3/214316782/TB2Bg75aFXXXXbSXpXXXXXXXXXX_!!214316782.jpg" width="640" height="378"></div>
    
15. 
    
16.             
    
17. 
    
18.             <div class="box2" style="width:640px; height:378px; background:red;"><img data-ks-lazyload="http://img04.taobaocdn.com/imgextra/i4/214316782/TB288NdaVXXXXaeXXXXXXXXXXXX_!!214316782.jpg" width="640" height="378"></div>
    
19.             <div class="box3" style="width:640px; height:378px; background:red;"><img data-ks-lazyload="http://img02.taobaocdn.com/imgextra/i2/214316782/TB24DU6aFXXXXb2XpXXXXXXXXXX_!!214316782.jpg" width="640" height="378"></div>
    
20.             <div class="box4" style="width:640px; height:378px; background:red;"><img data-ks-lazyload="http://img01.taobaocdn.com/imgextra/i1/214316782/TB2OadaaVXXXXcqXXXXXXXXXXXX_!!214316782.jpg" width="640" height="378"></div>
    
21.             <div class="box5" style="width:640px; height:378px; background:red;"><img data-ks-lazyload="http://img02.taobaocdn.com/imgextra/i2/214316782/TB23qBdaVXXXXawXXXXXXXXXXXX_!!214316782.jpg" width="640" height="378"></div>
    
22.             <div class="box6" style="width:640px; height:378px; background:red;"><img data-ks-lazyload="http://img01.taobaocdn.com/imgextra/i1/214316782/TB2Uk.8aFXXXXa7XpXXXXXXXXXX_!!214316782.jpg" width="640" height="378"></div>
    
23.             <div class="box7" style="width:640px; height:378px; background:red;"><img data-ks-lazyload="http://img02.taobaocdn.com/imgextra/i2/214316782/TB2LQhaaVXXXXbWXXXXXXXXXXXX_!!214316782.jpg" width="640" height="378"></div>
    
24. 
    
25.             <div class="box8" style="width:640px; height:378px; background:red;"><img data-ks-lazyload="http://img03.taobaocdn.com/imgextra/i3/214316782/TB2oppaaVXXXXb6XXXXXXXXXXXX_!!214316782.jpg" width="640" height="378"></div>
    
26.             <div class="box9" style="width:640px; height:378px; background:red;"><img data-ks-lazyload="http://img04.taobaocdn.com/imgextra/i4/214316782/TB28flaaVXXXXbJXXXXXXXXXXXX_!!214316782.jpg" width="640" height="378"></div>
    
27.             <div class="box10" style="width:640px; height:378px; background:red;"><img data-ks-lazyload="http://img03.taobaocdn.com/imgextra/i3/214316782/TB2RoU9aFXXXXaiXpXXXXXXXXXX_!!214316782.jpg" width="640" height="378"></div>
    
28.             <div class="box11" style="width:640px; height:378px; background:red;"><img data-ks-lazyload="http://img04.taobaocdn.com/imgextra/i4/214316782/TB2487_aFXXXXX8XpXXXXXXXXXX_!!214316782.jpg" width="640" height="378"></div>
    
29. 
    
30.       
    
31. 
    
32.             
    
33. 
    
34.             
    
35. 
    
36.             
    
37. 
    
38.             
    
39. 
    
40.             <div class="box12" style="width:640px; height:378px; background:red;"><img data-ks-lazyload="http://img01.taobaocdn.com/imgextra/i1/214316782/TB2lKRXaVXXXXcUXXXXXXXXXXXX_!!214316782.jpg" width="640" height="378"></div>
    
41. 
    
42.             
    
43. 
    
44.           <div class="box13" style="width:640px; height:378px; background:red;"><img data-ks-lazyload="http://img04.taobaocdn.com/imgextra/i4/214316782/TB2molfaVXXXXXuXXXXXXXXXXXX_!!214316782.jpg" width="640" height="378"></div>
    
45.           <div class="box14" style="width:640px; height:378px; background:red;"><img data-ks-lazyload="http://img04.taobaocdn.com/imgextra/i4/214316782/TB2Sd0gaVXXXXXiXXXXXXXXXXXX_!!214316782.jpg" width="640" height="378"></div>
    
46.           <div class="box15" style="width:640px; height:378px; background:red;"><img data-ks-lazyload="http://img04.taobaocdn.com/imgextra/i4/214316782/TB2quw6aFXXXXa2XpXXXXXXXXXX_!!214316782.jpg" width="640" height="378"></div>
    
47.           <div class="box16" style="width:640px; height:378px; background:red;"><img data-ks-lazyload="http://img03.taobaocdn.com/imgextra/i3/214316782/TB28lo_aFXXXXX0XpXXXXXXXXXX_!!214316782.jpg" width="640" height="378"></div>
    
48.           <div class="box17" style="width:640px; height:378px; background:red;"><img data-ks-lazyload="http://img04.taobaocdn.com/imgextra/i4/214316782/TB2.8E_aFXXXXXYXpXXXXXXXXXX_!!214316782.jpg" width="640" height="378"></div>
    
49.           <div class="box18" style="width:640px; height:378px; background:red;"><img data-ks-lazyload="http://img02.taobaocdn.com/imgextra/i2/214316782/TB2BrpbaVXXXXbZXXXXXXXXXXXX_!!214316782.jpg" width="640" height="378"></div>
    
50. 
    
51.           <div class="box19" style="width:640px; height:378px; background:red;"><img data-ks-lazyload="http://img03.taobaocdn.com/imgextra/i3/214316782/TB2qVtXaVXXXXc6XXXXXXXXXXXX_!!214316782.jpg" width="640" height="378"></div>
    
52.           <div class="box20" style="width:640px; height:378px; background:red;"><img data-ks-lazyload="http://img01.taobaocdn.com/imgextra/i1/214316782/TB2B8s.aFXXXXXHXpXXXXXXXXXX_!!214316782.jpg" width="640" height="378"></div>
    
53.           <div class="box21" style="width:640px; height:378px; background:red;"><img data-ks-lazyload="http://img02.taobaocdn.com/imgextra/i2/214316782/TB2IKM9aFXXXXaQXpXXXXXXXXXX_!!214316782.jpg" width="640" height="378"></div>
    
54.           <div class="box22" style="width:640px; height:378px; background:red;"><img data-ks-lazyload="http://img03.taobaocdn.com/imgextra/i3/214316782/TB29xpbaVXXXXbxXXXXXXXXXXXX_!!214316782.jpg" width="640" height="378"></div>
    
55. 
    
56.             
    
57. 
    
58.             
    
59. 
    
60.             
    
61. 
    
62.             
    
63. 
    
64.             
    
65. 
    
66.       <div class="box23" style="width:640px; height:378px; background:red;"><img data-ks-lazyload="http://img02.taobaocdn.com/imgextra/i2/214316782/TB27apeaVXXXXXZXXXXXXXXXXXX_!!214316782.jpg" width="640" height="378"></div>
    
67. 
    
68.             
    
69. 
    
70.           <div class="box24" style="width:640px; height:378px; background:red;"><img data-ks-lazyload="http://img01.taobaocdn.com/imgextra/i1/214316782/TB2aI..aFXXXXXPXpXXXXXXXXXX_!!214316782.jpg" width="640" height="378"></div>
    
71.           <div class="box25" style="width:640px; height:378px; background:red;"><img data-ks-lazyload="http://img02.taobaocdn.com/imgextra/i2/214316782/TB2WhE8aFXXXXbaXpXXXXXXXXXX_!!214316782.jpg" width="640" height="378"></div>
    
72.           <div class="box26" style="width:640px; height:378px; background:red;"><img data-ks-lazyload="http://img02.taobaocdn.com/imgextra/i2/214316782/TB25ks9aFXXXXayXpXXXXXXXXXX_!!214316782.jpg" width="640" height="378"></div>
    
73.           <div class="box27" style="width:640px; height:378px; background:red;"><img data-ks-lazyload="http://img01.taobaocdn.com/imgextra/i1/214316782/TB2.L0aaVXXXXbZXXXXXXXXXXXX_!!214316782.jpg" width="640" height="378"></div>
    
74.           <div class="box28" style="width:640px; height:378px; background:red;"><img data-ks-lazyload="http://img03.taobaocdn.com/imgextra/i3/214316782/TB2Y4Z8aFXXXXbhXpXXXXXXXXXX_!!214316782.jpg" width="640" height="378"></div>
    
75.           <div class="box29" style="width:640px; height:378px; background:red;"><img data-ks-lazyload="http://img04.taobaocdn.com/imgextra/i4/214316782/TB2JHA_aFXXXXawXpXXXXXXXXXX_!!214316782.jpg" width="640" height="378"></div>
    
76. 
    
77.           <div class="box30" style="width:640px; height:378px; background:red;"><img data-ks-lazyload="http://img03.taobaocdn.com/imgextra/i3/214316782/TB2aOo_aFXXXXamXpXXXXXXXXXX_!!214316782.jpg" width="640" height="378"></div>
    
78.           <div class="box31" style="width:640px; height:378px; background:red;"><img data-ks-lazyload="http://img02.taobaocdn.com/imgextra/i2/214316782/TB2fateaVXXXXX1XXXXXXXXXXXX_!!214316782.jpg" width="640" height="378"></div>
    
79.           <div class="box32" style="width:640px; height:378px; background:red;"><img data-ks-lazyload="http://img03.taobaocdn.com/imgextra/i3/214316782/TB2enk.aFXXXXXaXpXXXXXXXXXX_!!214316782.jpg" width="640" height="378"></div>
    
80.           <div class="box33" style="width:640px; height:378px; background:red;"><img data-ks-lazyload="http://img03.taobaocdn.com/imgextra/i3/214316782/TB2lvFXaVXXXXcJXXXXXXXXXXXX_!!214316782.jpg" width="640" height="378"></div>
    
81. 
    
82.       <div class="box34" style="width:640px; height:378px; background:red;"><img data-ks-lazyload="http://img02.taobaocdn.com/imgextra/i2/214316782/TB2h6hXaVXXXXcsXXXXXXXXXXXX_!!214316782.jpg" width="640" height="378"></div>
    
83. 
    
84.             
    
85. 
    
86.           <div class="box35" style="width:640px; height:378px; background:red;"><img data-ks-lazyload="http://img01.taobaocdn.com/imgextra/i1/214316782/TB2IixfaVXXXXXHXXXXXXXXXXXX_!!214316782.jpg" width="640" height="378"></div>
    
87.           <div class="box36" style="width:640px; height:378px; background:red;"><img data-ks-lazyload="http://img03.taobaocdn.com/imgextra/i3/214316782/TB2LptXaVXXXXc7XXXXXXXXXXXX_!!214316782.jpg" width="640" height="378"></div>
    
88.           <div class="box37" style="width:640px; height:378px; background:red;"><img data-ks-lazyload="http://img03.taobaocdn.com/imgextra/i3/214316782/TB2bsg.aFXXXXXJXpXXXXXXXXXX_!!214316782.jpg" width="640" height="378"></div>
    
89.           <div class="box38" style="width:640px; height:378px; background:red;"><img data-ks-lazyload="http://img01.taobaocdn.com/imgextra/i1/214316782/TB2E979aFXXXXaaXpXXXXXXXXXX_!!214316782.jpg" width="640" height="378"></div>
    
90.           <div class="box39" style="width:640px; height:378px; background:red;"><img data-ks-lazyload="http://img01.taobaocdn.com/imgextra/i1/214316782/TB2zhU.aFXXXXXqXpXXXXXXXXXX_!!214316782.jpg" width="640" height="378"></div>
    
91.           <div class="box40" style="width:640px; height:378px; background:red;"><img data-ks-lazyload="http://img02.taobaocdn.com/imgextra/i2/214316782/TB2typcaVXXXXaUXXXXXXXXXXXX_!!214316782.jpg" width="640" height="378"></div>
    
92. 
    
93.           <div class="box41" style="width:640px; height:378px; background:red;"><img data-ks-lazyload="http://img03.taobaocdn.com/imgextra/i3/214316782/TB2CoE9aFXXXXaSXpXXXXXXXXXX_!!214316782.jpg" width="640" height="378"></div>
    
94.           <div class="box42" style="width:640px; height:378px; background:red;"><img data-ks-lazyload="http://img03.taobaocdn.com/imgextra/i3/214316782/TB2TGw.aFXXXXXoXpXXXXXXXXXX_!!214316782.jpg" width="640" height="378"></div>
    
95.           <div class="box43" style="width:640px; height:378px; background:red;"><img data-ks-lazyload="http://img01.taobaocdn.com/imgextra/i1/214316782/TB21PtfaVXXXXXJXXXXXXXXXXXX_!!214316782.jpg" width="640" height="378"></div>
    
96.           <div class="box44" style="width:640px; height:378px; background:red;"><img data-ks-lazyload="http://img01.taobaocdn.com/imgextra/i1/214316782/TB2g6..aFXXXXXgXpXXXXXXXXXX_!!214316782.jpg" width="640" height="378"></div>
    
97. 
    
98.       <div class="box45" style="width:640px; height:378px; background:red;"><img data-ks-lazyload="http://img04.taobaocdn.com/imgextra/i4/214316782/TB2VjXbaVXXXXbjXXXXXXXXXXXX_!!214316782.jpg" width="640" height="378"></div>
    
99. 
    
100.             
     
101. 
     
102.           <div class="box46" style="width:640px; height:378px; background:red;"><img data-ks-lazyload="http://img02.taobaocdn.com/imgextra/i2/214316782/TB2qRU.aFXXXXXoXpXXXXXXXXXX_!!214316782.jpg" width="640" height="378"></div>
     
103.           <div class="box47" style="width:640px; height:378px; background:red;"><img data-ks-lazyload="http://img01.taobaocdn.com/imgextra/i1/214316782/TB2ipA_aFXXXXapXpXXXXXXXXXX_!!214316782.jpg" width="640" height="378"></div>
     
104.           <div class="box48" style="width:640px; height:378px; background:red;"><img data-ks-lazyload="http://img04.taobaocdn.com/imgextra/i4/214316782/TB23NE9aFXXXXaYXpXXXXXXXXXX_!!214316782.jpg" width="640" height="378"></div>
     
105.           <div class="box49" style="width:640px; height:378px; background:red;"><img data-ks-lazyload="http://img02.taobaocdn.com/imgextra/i2/214316782/TB2t1JXaVXXXXcPXXXXXXXXXXXX_!!214316782.jpg" width="640" height="378"></div>
     
106.           <div class="box50" style="width:640px; height:378px; background:red;"><img data-ks-lazyload="http://img04.taobaocdn.com/imgextra/i4/214316782/TB2BDM_aFXXXXXMXpXXXXXXXXXX_!!214316782.jpg" width="640" height="378"></div>
     
107.           <div class="box51" style="width:640px; height:378px; background:red;"><img data-ks-lazyload="http://img03.taobaocdn.com/imgextra/i3/214316782/TB2NBdcaVXXXXaMXXXXXXXXXXXX_!!214316782.jpg" width="640" height="378"></div>
     
108. 
     
109.           <div class="box52" style="width:640px; height:378px; background:red;"><img data-ks-lazyload="http://img02.taobaocdn.com/imgextra/i2/214316782/TB23BM_aFXXXXX8XpXXXXXXXXXX_!!214316782.jpg" width="640" height="378"></div>
     
110.           <div class="box53" style="width:640px; height:378px; background:red;"><img data-ks-lazyload="http://img01.taobaocdn.com/imgextra/i1/214316782/TB2vxFcaVXXXXa2XXXXXXXXXXXX_!!214316782.jpg" width="640" height="378"></div>
     
111.           <div class="box54" style="width:640px; height:378px; background:red;"><img data-ks-lazyload="http://img01.taobaocdn.com/imgextra/i1/214316782/TB2lVlcaVXXXXbdXXXXXXXXXXXX_!!214316782.jpg" width="640" height="378"></div>
     
112.           <div class="box55" style="width:640px; height:378px; background:red;"><img data-ks-lazyload="http://img01.taobaocdn.com/imgextra/i1/214316782/TB2H7Q8aFXXXXa8XpXXXXXXXXXX_!!214316782.jpg" width="640" height="378"></div>
     
113. 
     
114.       <div class="box56" style="width:640px; height:378px; background:red;"><img data-ks-lazyload="http://img04.taobaocdn.com/imgextra/i4/214316782/TB2YKXbaVXXXXbEXXXXXXXXXXXX_!!214316782.jpg" width="640" height="378"></div>
     
115. 
     
116.             
     
117. 
     
118.           <div class="box57" style="width:640px; height:378px; background:red;"><img data-ks-lazyload="http://img03.taobaocdn.com/imgextra/i3/214316782/TB2_c4caVXXXXaKXXXXXXXXXXXX_!!214316782.jpg" width="640" height="378"></div>
     
119.           <div class="box58" style="width:640px; height:378px; background:red;"><img data-ks-lazyload="http://img04.taobaocdn.com/imgextra/i4/214316782/TB2zW0baVXXXXbEXXXXXXXXXXXX_!!214316782.jpg" width="640" height="378"></div>
     
120.           <div class="box59" style="width:640px; height:378px; background:red;"><img data-ks-lazyload="http://img04.taobaocdn.com/imgextra/i4/214316782/TB2pz79aFXXXXafXpXXXXXXXXXX_!!214316782.jpg" width="640" height="378"></div>
     
121.           <div class="box60" style="width:640px; height:378px; background:red;"><img data-ks-lazyload="http://img03.taobaocdn.com/imgextra/i3/214316782/TB2UOM6aFXXXXb5XpXXXXXXXXXX_!!214316782.jpg" width="640" height="378"></div>
     
122.           <div class="box61" style="width:640px; height:378px; background:red;"><img data-ks-lazyload="http://img03.taobaocdn.com/imgextra/i3/214316782/TB2fjXeaVXXXXXxXXXXXXXXXXXX_!!214316782.jpg" width="640" height="378"></div>
     
123.           <div class="box62" style="width:640px; height:378px; background:red;"><img data-ks-lazyload="http://img02.taobaocdn.com/imgextra/i2/214316782/TB2S4tXaVXXXXcEXXXXXXXXXXXX_!!214316782.jpg" width="640" height="378"></div>
     
124. 
     
125.           <div class="box63" style="width:640px; height:378px; background:red;"><img data-ks-lazyload="http://img04.taobaocdn.com/imgextra/i4/214316782/TB2Zak.aFXXXXXoXpXXXXXXXXXX_!!214316782.jpg" width="640" height="378"></div>
     
126.           <div class="box64" style="width:640px; height:378px; background:red;"><img data-ks-lazyload="http://img02.taobaocdn.com/imgextra/i2/214316782/TB2ZHU9aFXXXXatXpXXXXXXXXXX_!!214316782.jpg" width="640" height="378"></div>
     
127.           <div class="box65" style="width:640px; height:378px; background:red;"><img data-ks-lazyload="http://img03.taobaocdn.com/imgextra/i3/214316782/TB2caVbaVXXXXbTXXXXXXXXXXXX_!!214316782.jpg" width="640" height="378"></div>
     
128.           <div class="box66" style="width:640px; height:378px; background:red;"><img data-ks-lazyload="http://img02.taobaocdn.com/imgextra/i2/214316782/TB26gdbaVXXXXbGXXXXXXXXXXXX_!!214316782.jpg" width="640" height="378"></div>
     
129. 
     
130.       <div class="box67" style="width:640px; height:378px; background:red;"><img data-ks-lazyload="http://img04.taobaocdn.com/imgextra/i4/214316782/TB2hKdaaVXXXXb.XXXXXXXXXXXX_!!214316782.jpg" width="640" height="378"></div>
     
131. 
     
132.             
     
133. 
     
134.           <div class="box68" style="width:640px; height:378px; background:red;"><img data-ks-lazyload="http://img03.taobaocdn.com/imgextra/i3/214316782/TB2Y0pXaVXXXXcZXXXXXXXXXXXX_!!214316782.jpg" width="640" height="378"></div>
     
135.           <div class="box69" style="width:640px; height:378px; background:red;"><img data-ks-lazyload="http://img02.taobaocdn.com/imgextra/i2/214316782/TB2S8A8aFXXXXbkXpXXXXXXXXXX_!!214316782.jpg" width="640" height="378"></div>
     
136.           <div class="box70" style="width:640px; height:378px; background:red;"><img data-ks-lazyload="http://img02.taobaocdn.com/imgextra/i2/214316782/TB2EEo9aFXXXXaaXpXXXXXXXXXX_!!214316782.jpg" width="640" height="378"></div>
     
137.           <div class="box71" style="width:640px; height:378px; background:red;"><img data-ks-lazyload="http://img01.taobaocdn.com/imgextra/i1/214316782/TB2f1JXaVXXXXcwXXXXXXXXXXXX_!!214316782.jpg" width="640" height="378"></div>
     
138.           <div class="box72" style="width:640px; height:378px; background:red;"><img data-ks-lazyload="http://img02.taobaocdn.com/imgextra/i2/214316782/TB2.uk_aFXXXXX_XpXXXXXXXXXX_!!214316782.jpg" width="640" height="378"></div>
     
139.          
     
140. 
     
141.   </div>
     
142. 
     
143.         
     
144. 
     
145. </div>      
     
146. 
     
147. <div  class="JMNB-8" style="display:none;"></div>
     
148. 
     
149. 
     
150. <ul class="footer-more-trigger" style="padding:0px;margin:0px;width:201px;height:100px;overflow:hidden;top:336px;left:485px;border:none;" title="这里是控制柄">
     
151.   
     
152. 
     
153.   
     
154. 
     
155.   <li style="padding:0px;margin:0px;width:100px;display:block;float:left;height:100px;border-bottom-left-radius:20px;overflow:hidden;"> <img data-ks-lazyload="http://img01.taobaocdn.com/imgextra/i1/214316782/T2z8p9X8XXXXXXXXXX_!!214316782.png" class="JM-NEXT" style="cursor:pointer;" title="下一屏幕"> </li> <li style="width:100px;display:block;float:left;height:100px;padding:0px;margin:0px;border-bottom-right-radius:20px;overflow:hidden;"> <img data-ks-lazyload="http://img01.taobaocdn.com/imgextra/i1/214316782/T2WGqXX0NXXXXXXXXX_!!214316782.png" class="JM-PREV" style="cursor:pointer;" title="上一屏幕"> </li> </ul>
     
156. 
     
157. 
     
158. 
     
159. 
     
160. </div>

复制代码