78.3D立体轮播图（完整兼容手机端和pc端）

效果呈现来源于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({backgroundColor:"rgba(255, 255, 255, 0.77)"}).eq(m%b).css({backgroundColor:"rgba(0, 0, 0, 0.77)"});l=(Math.round(c/f)-1)%b;a.onSlideShow.call(this,h.find("."+a.slideClass).eq((l+1)%b))}function z(){d.width("100%");n=d.width()<a.width?d.width():a.width;t=n/G;d.css({width:n+
"px",height:t+"px"});-1!=a.animation.indexOf("slide")?(e=n/2/Math.tan(Math.PI/b),k=n/2*Math.tan(2*Math.PI/b)+"px"):-1!=a.animation.indexOf("scroll")?(e=t/2/Math.tan(Math.PI/b),k=t/2*Math.tan(2*Math.PI/b)+"px"):"fade"==a.animation&&(e=n/2/Math.tan(Math.PI/b),k=n/2*Math.tan(2*Math.PI/b)+"px");d.find("."+a.slideClass).each(function(d){var b=g(this);-1!=a.animation.indexOf("slide")?p="rotateY("+f*d+"deg) translateZ("+e+"px)":-1!=a.animation.indexOf("scroll")?p="rotateX("+f*d+"deg) translateZ("+e+"px)":
    "fade"==a.animation&&(p="rotateY("+f*d+"deg) translateZ("+e+"px)");b.css({transform:p})});k=a.perspective||k;h.css({transform:"translateZ("+-e+"px) rotateY("+-c+"deg)"});d.css({perspective:k})}var a=g.extend(!0,{},{width:1349,height:668,slides:[],slideLayout:"fill",perspective:0,animation:"slide3D",animationCurve:"ease",animationDuration:700,animationInterval:2E3,autoplay:!0,controls:!0,slideClass:"jR3DCarouselSlide",navigation:"circles",onSlideShow:function(){}},y),d=this,n=a.width,t=a.height,G=
    a.width/a.height,h=g("<div class='jR3DCarousel' />").css({width:"100%",height:"100%",transition:"transform "+a.animationDuration+"ms "+a.animationCurve,transformStyle:"preserve-3d"}).appendTo(d),l=0,m=1,w=new x,q,r,v,f,c=0,e,k,p,b=a.slides.length||d.find("."+a.slideClass).length;(function(){function F(){q=g("<div class='previous controls' style='left: 8px; transform: rotate(-45deg);'></div>");r=g("<div class='next controls' style='right: 8px; transform: rotate(135deg);'></div>");q.add(r).appendTo(d).css({position:"absolute",
    top:"42%",zIndex:1,display:"inline-block",padding:"1.2em",boxShadow:"2px 2px 0 rgba(255,255,255,0.9) inset",cursor:"pointer"}).hide();q.on("click",function(){l=Math.round(c/f);m=l-1;w.run(a.animation,m)});r.on("click",function(){l=Math.round(c/f);m=l+1;w.run(a.animation,m)});d.on("mouseenter touchstart",function(){q.add(r).fadeIn()}).on("mouseleave touchcancel",function(){q.add(r).fadeOut()});g(document).on("keydown",function(a){var b=d[0].getBoundingClientRect();(b=0<b.bottom&&0<b.right&&b.left<
    (innerWidth||document.documentElement.clientWidth)&&b.top<(innerHeight||document.documentElement.clientHeight))&&37==a.which?(clearInterval(v),q.click()):b&&39==a.which&&(clearInterval(v),r.click())});u(d,function(b){clearInterval(v);"left"==b?r.click():"right"==b?q.click():-1!=a.animation.indexOf("scroll")&&("down"==b?r.click():"up"==b&&q.click())})}function u(a,b){var d,f,e,g,c,h,k;a.on("touchstart",function(a){a=a.originalEvent.changedTouches[0];d="none";f=a.pageX;e=a.pageY;k=(new Date).getTime()}).on("touchmove",
    function(a){a.preventDefault()}).on("touchend",function(a){a=a.originalEvent.changedTouches[0];g=a.pageX-f;c=a.pageY-e;h=(new Date).getTime()-k;700>=h&&(20<=Math.abs(g)&&100>=Math.abs(c)?d=0>g?"left":"right":20<=Math.abs(c)&&100>=Math.abs(g)&&(d=0>c?"up":"down"));b(d)})}function x(){for(var f=a.navigation,e=g("<div class=navigation />").css({position:"absolute",bottom:0,right:0}),c=0;c<b;c++)e.append("<div class=nav></div>");"circles"==f&&e.find(".nav").css({borderRadius:"12px"});e.find(".nav").css({display:"inline-block",
    margin:"5px",cursor:"pointer",backgroundColor:"rgba(255, 255, 255, 0.77)",width:"12px",height:"12px",transition:"all "+a.animationDuration+"ms ease"}).first().css({backgroundColor:"rgba(0, 0, 0, 1)"});h.after(e);d.on("click",".nav",function(){m=g(this).index();w.run(a.animation,m)})}function y(){v=setInterval(function(){l=Math.round(c/f);m=l+1;w.run(a.animation,m)},a.animationInterval+a.animationDuration);d.hover(function(){clearInterval(v)},function(){v=setInterval(function(){l=Math.round(c/f);m=
    l+1;w.run(a.animation,m)},a.animationInterval+a.animationDuration)})}(function(){-1!=a.animation.indexOf("slide")?(e=n/2/Math.tan(Math.PI/b),k=n/2*Math.tan(2*Math.PI/b)+"px"):-1!=a.animation.indexOf("scroll")?(e=t/2/Math.tan(Math.PI/b),k=t/2*Math.tan(2*Math.PI/b)+"px"):"fade"==a.animation&&(e=n/2/Math.tan(Math.PI/b),k=n/2*Math.tan(2*Math.PI/b)+"px");f=360/b;if(a.slides.length)for(var c=0;c<a.slides.length;c++){var l=g("<div class='jR3DCarouselSlide' data-index="+c+" />").append("<a href='" + a.slides[c].href + "'><img src='"+a.slides[c].src+
    "' alt='"+a.slides[c].alt+"' /></a>");-1!=a.animation.indexOf("slide")?p="rotateY("+f*c+"deg) translateZ("+e+"px)":-1!=a.animation.indexOf("scroll")?p="rotateX("+f*c+"deg) translateZ("+e+"px)":"fade"==a.animation&&(p="rotateY("+f*c+"deg) translateZ("+e+"px)");l.css({transform:p});h.append(l)}else d.find("."+a.slideClass).each(function(b){var c=g(this).attr("data-index",b);-1!=a.animation.indexOf("slide")?p="rotateY("+f*b+"deg) translateZ("+e+"px)":-1!=a.animation.indexOf("scroll")?p="rotateX("+f*b+"deg) translateZ("+
    e+"px)":"fade"==a.animation&&(p="rotateY("+f*b+"deg) translateZ("+e+"px)");c=c.css({transform:p}).detach();h.append(c)});h.find("."+a.slideClass).css({position:"absolute",left:0,top:0,width:"100%",height:"100%",backfaceVisibility:"hidden"}).find("img").css({width:"100%",height:"100%",objectFit:a.slideLayout});k=a.perspective||k;d.css({perspective:k,width:n+"px",height:t+"px",position:"relative",overflow:"visible"})})();a.controls&&F();a.navigation&&x();a.autoplay&&y();addEventListener("resize",z);
    z()})();x.prototype.run=function(a,b){this.animations[a](b)};this.showSlide=function(a){h.find(".nav").eq((a-1)%b).click()};this.getCurrentSlide=function(){return h.find("."+a.slideClass).eq(l)};this.getSlideByIndex=function(b){return h.find("."+a.slideClass+"[data-index="+b+"]")};this.showPreviousSlide=function(){q.click()};this.showNextSlide=function(){r.click()};return this}});

$(document).ready(function(){
    var c = $(".find-tab").find("span").eq(0).attr("value");
    var slides=[];
    $.each(sandJson,
        function(h, j) {
            if (j.yid == c) {
                for(var i=0;i<1;i++) {
                    slides.push(j);
                }
            }
        });
    $(".find-tab span").click(function() {
        var h = $(".find-span-active").attr("value");
        $(".jR3DCarouselGallery").empty();
        var slides=[];
        $.each(sandJson,
            function(j, k) {
                if (k.yid == h) {
                    for(var i=0;i<1;i++) {
                        slides.push(k);
                    }
                }
            })
        carouselPropsA(slides);
    });
    carouselPropsA(slides);
})
function carouselPropsA(slides){
    var jR3DCarousel;
    var carouselProps = {
        width: 300,
        height:185,
        slideLayout : 'contain',
        animation: 'slide3D',
        animationCurve: 'ease',
        animationDuration: 700,
        animationInterval: 1000,
        autoplay: true,
        navigation: 'none',
        slides: slides,
        perspective: 450
    }
    function setUp(){
        jR3DCarousel = $('.jR3DCarouselGallery').jR3DCarousel(carouselProps);
    }
    setUp()
}