DIY一个Jquery3D图片墙插件

最新推荐文章于 2018-11-21 14:25:00 发布

水中残月

最新推荐文章于 2018-11-21 14:25:00 发布

阅读量2.1k

点赞数 2

分类专栏： HTML5 文章标签： javascript html5 jquery 3d 插件

本文链接：https://blog.csdn.net/sonnylight/article/details/53397219

版权

HTML5 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

我把这个插件放在了我的服务器上，下载地址为：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.οnlοad=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);
    // })
});

水中残月

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
DIY一个Jquery3D图片墙插件

我把这个插件放在了我的服务器上，下载地址为：http://www.webcjames.com/download/jquery3D_carousel.rar 动画展示链接：http://webcjames.com/jquery3D_carousel/index.html代码如下：html代码： Jquery3D_carousel
复制链接

扫一扫

专栏目录