DIY一个Jquery3D图片墙插件

来源：互联网发布：化学品兼容性矩阵编辑：程序博客网时间：2024/05/29 03:23

我把这个插件放在了我的服务器上，下载地址为：http://www.webcjames.com/download/jquery3D_carousel.rar

动画展示链接：http://webcjames.com/jquery3D_carousel/index.html

代码如下：

html代码：

<!doctype html><html lang="en"><head><meta charset="UTF-8"><title>Jquery3D_carousel</title><link rel="stylesheet" href="css/common.css"><script src="js/jquery.js"></script><script src="js/common.js"></script></head><body>    <div id="cs-carousel">      <div id="view">         <div class="c-part p1">           <img src="images/c_bg.png" alt="" class="pAb">           <img src="images/c4.jpg" alt="">         </div>         <div class="c-part p2">           <img src="images/c_bg.png" alt="" class="pAb">           <img src="images/c2.jpg" alt="">         </div>         <div class="c-part p3">           <img src="images/c_bg.png" alt="" class="pAb">           <img src="images/c3.jpg" alt="">         </div>         <div class="c-part p4">           <img src="images/c_bg.png" alt="" class="pAb">           <img src="images/c1.jpg" alt="">         </div>         <div class="c-part p5">          <img src="images/c_bg.png" alt="" class="pAb">           <img src="images/c5.jpg" alt="">         </div>      </div>      <div class="v-l"></div>      <div class="v-r"></div>    </div>     <div class="cs-line">       <ul>         <li></li>         <li></li>         <li></li>         <li></li>         <li></li>       </ul>     </div>     <div class="numIndex"><span>1</span>/5</div></body></html>

css代码：

@charset "utf-8";*{padding:0;margin:0;}#cs-carousel{position: relative;perspective:1000px;width: 100%;}#view{transform-style:preserve-3d;position:absolute;width: 100%;transtion:transform 1s;}#cs-carousel .c-part{width:24%;position: absolute;left: 38%;cursor: pointer;}#cs-carousel .c-part img{width: 100%;vertical-align: middle;}#cs-carousel .pAb{position: absolute;opacity: 0.5}#cs-carousel .p1{transform:translateZ(0px);left:38%;transition:transform 2s;}#cs-carousel .p2{transform:translateZ(-40px);left:21%;transition:transform 2s;}#cs-carousel .p3{transform:translateZ(-80px);left:4%;transition:transform 2s;}#cs-carousel .p4{transform:translateZ(-80px);left:72%;transition:transform 2s;}#cs-carousel .p5{transform:translateZ(-40px);left:55%;transition:transform 2s;}#cs-carousel .v-r,#cs-carousel .v-l{position: absolute;height:50px;width:50px;border-radius: 50%;cursor: pointer;opacity: 0.5;}#cs-carousel .v-r{background: black url(../images/v_r.png) no-repeat;background-size:100% 100%;top:50%;right: 8%;}#cs-carousel .v-l{background: black url(../images/v_l.png) no-repeat;background-size:100% 100%;top:50%;left: 8%;}.cs-line{font-size: 0;height: 1px;overflow: hidden;margin-top:10px;}.cs-line li{height: 1px;width: 20%;float: left;}.cs-line li:nth-child(1){background: #94C908;}.numIndex{width: 800px;text-align: right;font-size: 15px;margin:8px auto;}

JS代码：

$(document).ready(function() {    //update    window.onload=function(){      var carouselH=$(".c-part").height();      $("#cs-carousel,#view").css("height",carouselH+"px");            //给图片墙一个高度    }    var screenW=$(window).width();    var screenH=$(window).height();    $("#cs-carousel .v-r,#cs-carousel .v-l").hover(function(){      $(this).stop(true,true).animate({        "opacity":"0.8"      })    },function(){      $(this).animate({        "opacity":"0.5"      })    })    //变化的参数是17% 40px    var _index=0;    var p1Ab=$("#cs-carousel .p1 .pAb");    var p2Ab=$("#cs-carousel .p2 .pAb");    var p3Ab=$("#cs-carousel .p3 .pAb");    var p4Ab=$("#cs-carousel .p4 .pAb");    var p5Ab=$("#cs-carousel .p5 .pAb");    p1Ab.hide();    $("#cs-carousel .v-r").on('click',function(){     //点击左右按钮时的动作      _index++;      if(_index>=5){_index=0;}      carouselAnimate(_index);      // console.log(_index);      lineAnimate(_index);      $(".numIndex span").text(_index+1);    })    $("#cs-carousel .v-l").on('click',function(){     //点击左右按钮时的动作      _index--;      if(_index<=-1){_index=4;}      carouselAnimate(_index);      lineAnimate(_index);      $(".numIndex span").text(_index+1);    })    function carouselAnimate(a){       p1A(a);p2A(a);p3A(a);p4A(a);p5A(a);          }    function p1A(i){      var _deg,_left;                        //动画时有两个变量      switch(i){        case 1:_deg=-40;_left=21;p1Ab.show();break;        case 2:_deg=-80;_left=4;p1Ab.show();break;        case 3:_deg=-80;_left=72;p1Ab.show();break;        case 4:_deg=-40;_left=55;p1Ab.show();break;        case 0:_deg=0;_left=38;p1Ab.hide();break;               }       $("#cs-carousel .p1").stop(true,true).css({"transform":"translateZ("+_deg+"px)"}).animate({        "left":_left+"%"       },1000);            }    function p2A(i){      var _deg,_left;      switch(i){        case 0:_deg=-40;_left=21;p2Ab.show();break;        case 1:_deg=-80;_left=4;p2Ab.show();break;        case 2:_deg=-80;_left=72;p2Ab.show();break;        case 3:_deg=-40;_left=55;p2Ab.show();break;        case 4:_deg=0;_left=38;p2Ab.hide();break;               }       $("#cs-carousel .p2").stop(true,true).css({"transform":"translateZ("+_deg+"px)"}).animate({        "left":_left+"%"       },1000);            }    function p3A(i){      var _deg,_left;      switch(i){        case 4:_deg=-40;_left=21;p3Ab.show();break;        case 0:_deg=-80;_left=4;p3Ab.show();break;        case 1:_deg=-80;_left=72;p3Ab.show();break;        case 2:_deg=-40;_left=55;p3Ab.show();break;        case 3:_deg=0;_left=38; p3Ab.hide();break;               }       $("#cs-carousel .p3").stop(true,true).css({"transform":"translateZ("+_deg+"px)"}).animate({        "left":_left+"%"       },1000);            }    function p4A(i){      var _deg,_left;      switch(i){        case 3:_deg=-40;_left=21;p4Ab.show();break;        case 4:_deg=-80;_left=4;p4Ab.show();break;        case 0:_deg=-80;_left=72;p4Ab.show();break;        case 1:_deg=-40;_left=55;p4Ab.show();break;        case 2:_deg=0;_left=38;p4Ab.hide();break;               }       $("#cs-carousel .p4").stop(true,true).css({"transform":"translateZ("+_deg+"px)"}).animate({        "left":_left+"%"       },1000);            }    function p5A(i){      var _deg,_left;      switch(i){        case 2:_deg=-40;_left=21;p5Ab.show();break;        case 3:_deg=-80;_left=4;p5Ab.show();break;        case 4:_deg=-80;_left=72;p5Ab.show();break;        case 0:_deg=-40;_left=55;p5Ab.show();break;        case 1:_deg=0;_left=38;p5Ab.hide();break;               }       $("#cs-carousel .p5").stop(true,true).css({"transform":"translateZ("+_deg+"px)"}).animate({        "left":_left+"%"       },1000);            }    function lineAnimate(_index){        var _lineS=_index+1;        $(".cs-line ul").find("li:gt(0)").css({"background":"white"});        $(".cs-line ul").find("li:lt("+_lineS+")").css({"background":"#94C908"});    }    // $(".c-part").on('click',function(){    //   var _index=$(this).index();    //   _index--;    //   console.log(_index);    //   carouselAnimate(_index);    // })});

1 0