效果呈现来源于http://www.jq22.com/demo/jR3DCarousel-master20160315/

在此基础上改成需要的3个分类的3D图

由于原有的不支持粘贴复制显示3个分类

我通过点击分类去获取当前分类下的图片路径生成3d

最后发现每一种分类下图片要么都是小于8张，

要么都是大于8张，此目的是因为保证每个3d图角度一样

修改后的效果可以去https://m.zqins.com/参观

html:

<div class="find-tab">
<span class="find-span-active" value="1"><b>户型</b><i></i></span>
<span value="2"><b>风格</b><i></i></span>
<span value="3"><b>空间</b><i></i></span>
</div>
<div class="find-slide">
<ul class="find-ul find-ul-active">
<div class="jR3DCarouselGallery"></div>
</ul>
</div>

js:

sandJson为图片数组。

var sandJson=[
{
"erd": 图片id,
"yid": 1,
"src": "图片路径",
"href": "a链接"
},
{
"erd":图片id,
"yid": 2,
"src": "https://m.zqins.com/public/static/sj/img/3d/style1.png",
"href": "https://m.zqins.com/xiaoguotu/?hx=129&&lx=&&fg=&&jb="
},

{ "erd": 图片id,
"yid": 3,
"src": "https://m.zqins.com/public/static/sj/img/3d/kong1.png",
"href": "https://m.zqins.com/xiaoguotu/?hx=&&lx=142&&fg=&&jb="
},

]

引入此js，如果需要修改3d的HTML，可以在此js里修改循环语句。

/**
 * Author: Vinayak Rangnathrao Jadhav
 * Project: jR3DCarousel
 * Version: 0.0.8
 **/
(function(g){"function"===typeof define&&define.amd?define(["jquery"],g):"object"===typeof exports?module.exports=g(require("jquery")):g(jQuery)})(function(g){g.fn.jR3DCarousel=function(y){function x(){this.animations={slide:A,slide3D:B,scroll:C,scroll3D:D,fade:E}}function A(a){d.css({perspective:"",overflow:"hidden"});c=f*a;h.css({transform:"translateZ("+-e+"px) rotateY("+-c+"deg)"});u()}function B(a){d.css({perspective:k,overflow:"visible"});c=f*a;h.css({transform:"translateZ("+-e+"px) rotateY("+
-c+"deg)"});u()}function C(a){d.css({perspective:"",overflow:"hidden"});c=f*a;h.css({transform:"translateZ("+-e+"px) rotateX("+-c+"deg)"});u()}function D(a){d.css({perspective:k,overflow:"visible"});c=f*a;h.css({transform:"translateZ("+-e+"px) rotateX("+-c+"deg)"});u()}function E(g){h.css({transition:"opacity "+a.animationDuration+"ms "+a.animationCurve,opacity:0});d.find(".nav").css({backgroundColor:"rgba(255, 255, 255, 0.77)"}).eq(m%b).css({backgroundColor:"rgba(0, 0, 0, 1)"});clearTimeout(k);var k=
    setTimeout(function(){c=f*g;h.css({transform:"translateZ("+-e+"px) rotateY("+-c+"deg)",opacity:1});l=(Math.round(c/f)-1)%b;a.onSlideShow.call(this,h.find("."+a.slideClass).eq((l+1)%b))},a.animationDuration)}function u(){d.find(".nav").css({back