淘宝店铺装修360度宝贝全景展示代码
核心是你要有图片素材，稍微调用了轮播配置即可实现 。 代码直接复制进自定义模块即可测试 。本代码中对图片 360°的角度切割 ，拼接起来就是全景展示。 图片较多，需要缓冲一会儿才可以显示全 。360°切片成 72个图片。工作量好大的说， 有兴趣的可以拿去玩玩。
<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':,'circular': true,'duration':0.5,'activeTriggerCls':'.ABCD','interval':0.1,}" data-widget-type="Carousel" style="float:left;height:400px; position:relative;">
<div class="footer-more-trigger" style=" width:640px; height:378px; overflow:hidden; padding:0;border: 4px solid #FFF;
opacity: 0.9; top:0px; left:0px;">
<divclass="JMLB-8">
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
</div>
</div>
<divclass="JMNB-8" style="display:none;"></div>
<ul class="footer-more-trigger" style="padding:0px;margin:0px;width:201px;height:100px;overflow:hidden;top:336px;left:485px;border:none;" title="这里是控制柄">
<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>
</div>
页:
[1]