JS实现 类似图片3D效果

其实这样的效果 目前很多网站上都有 其实以前也写过一个 只是当时代码只是为了实现而已，代码很乱，所以现在有业余时间研究了下，其实也并没有什么特殊地方 很类似于左右控制按钮切换图片的思路。效果如下：

可能录制的时候 有点卡 。

具体思路： 1. 首先和左右箭头切换图片思路是一模一样的 点击下一页按钮时候 外层容器left =  一张图片的宽度×当前的索引index 同理 点击上一页按钮也一样 然后加点动画效果改变相对应的宽度和高度 就可以实现。思路其实很简单的。所以就半斤八两就写了一个，希望各位高手包涵啊！所以也没有什么好解释的地方。直接上代码，下面有源码附件 具体的可以看看源码。

HTML代码如下：

 <div class="slider">
         <a href="javascript:void(0);" class="prev btn"></a>
         <div class="scroll">
             <ul class="scrollContainer">
                 <li class="panel">
                     <a href="" class="inside" target="_blank">
                         <img width="230" height="288" alt="Alexander McQueen秋季" src="data:images/1.jpg" />
                         <span>Alexander McQueen秋季1</span>
                     </a>
                 </li>
                 <li class="panel">
                     <a href="" class="inside" target="_blank">
                         <img width="230" height="288" alt="Alexander McQueen秋季" src="data:images/2.jpg" />
                         <span>Gustavsson演绎朋克的性感</span>
                     </a>
                 </li>
                 <li class="panel">
                     <a href="" class="inside" target="_blank">
                         <img width="230" height="288" alt="Alexander McQueen秋季" src="data:images/3.jpg" />
                         <span>Alexander McQueen秋季3</span>
                     </a>
                 </li>
                 <li class="panel">
                     <a href="" class="inside" target="_blank">
                         <img width="230" height="288" alt="Alexander McQueen秋季" src="data:images/4.jpg" />
                         <span>Alexander McQueen秋季4</span>
                     </a>
                 </li>
                 <li class="panel">
                     <a href="" class="inside" target="_blank">
                         <img width="230" height="288" alt="Alexander McQueen秋季" src="data:images/5.jpg" />
                         <span>Alexander McQueen秋季5</span>
                     </a>
                 </li>
                 <li class="panel">
                     <a href="" class="inside" target="_blank">
                         <img width="230" height="288" alt="Alexander McQueen秋季" src="data:images/6.jpg" />
                         <span>Alexander McQueen秋季6</span>
                     </a>
                 </li>
                 <li class="panel">
                     <a href="" class="inside" target="_blank">
                         <img width="230" height="288" alt="Alexander McQueen秋季" src="data:images/7.jpg" />
                         <span>Alexander McQueen秋季7</span>
                     </a>
                 </li>
             </ul>
         </div>
         <a href="javascript:void(0);" class="next btn"></a>
     </div>

CSS代码如下：

 <style>
     *{margin:;padding:;list-style-type:none;}
     a,img{border:;}
     body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";}
     a{color:#000;outline:none;text-decoration:none;}
     a:hover{text-decoration:underline;}
     /* slider */
     .slider{width:730px;height:312px;overflow:hidden;position:relative;margin:20px auto 0;}
     .scroll{float:left;display:inline;width:660px;height:312px;margin-left:30px;overflow:hidden;position:relative;}
     .scrollContainer{position: relative;left:0px;}
     .scrollContainer .current .inside{width:230px;height:288px;}

     .scrollContainer .panel{width:170px;height:235px;float: left;padding-right:30px;overflow:hidden;}

     .panel .inside{display:block;position:relative; }
     .inside img{height:100%;width:100%;}
     .scroll li .inside span{
         position:absolute;
         bottom:0px;
         left:16px;
         width:197px;
         height:37px;
         line-height:37px;
         display:none;
         background-color:#c69;
         font-size:14px;color:#FFF;
         text-align:center;
         z-index:;
     }
     .scroll li.current .inside span{display:block;}

     .slider a.btn{background:url('images/index.png') no-repeat;}
     .slider a.btn{float:left;margin-top:92px;width:20px; height:39px; }

     .slider a.prev{background-position:0 -61px;}
     .slider a.prev:hover{background-position:0 -102px;}

     .slider a.next{right:;background-position:-50px -61px;}
     .slider a.next:hover{background-position:-50px -102px;}

     .scrollContainer .current {width:230px;height:312px;}
   </style>

JS代码如下：

 /*
  * JS 3D效果
  * @author tugenhua
  * @date 2013-11-28
  * @email 879083421@qq.com
  */
 function LeftAndRight(options) {

     this.config = {
         container            : '.slider',               // 最外层容器
         scrollContainer      :  '.scrollContainer',     // 外层容器ul
         prevBtn              :  'prev',                // 上一页按钮
         nextBtn              :  'next',                // 下一页按钮
         currentCls           :  'current',             // 当前的类名
         addItemWidth         :   70,                   // 中间突出增加的宽度
         changeBeforeWH       :  {width:'170px',height:'235px'}, // 改变前的宽度和高度
         changeAfterWH        :  {width:'230px',height:'312px'}, // 改变后的宽度和高度
         callback              :   null                  // 每次点击后的回调函数 @param 当前的第几个
     };

     this.cache = {
         curIndex   : 0    // 保存当前li的索引
     };

     this.init(options);
 }

 LeftAndRight.prototype = {

     constructor: LeftAndRight,

     init: function(options) {
         this.config = $.extend(this.config, options || {});
         var self = this,
             _config = self.config,
             _cache = self.cache;

         // 初始化计算ul的宽度
         self._calculateUlWidth();

         // 所有事件
         self._bindEnv();
     },
     _calculateUlWidth: function(){
         var self = this,
             _config = self.config,
             _cache = self.cache;

         if($(_config.scrollContainer) && $(_config.scrollContainer + ' li').length > 0){

             $(_config.scrollContainer).each(function(index,item){

                 var liWidth = $('li',item).outerWidth(),
                     liLen = $('li',item).length;

                 // 初始化时候 让中间的li 增加class current
                 var centerLi = $('li',item)[_cache.curIndex + 1];

                 $(centerLi).animate({'width':_config.changeAfterWH.width,'height':_config.changeAfterWH.height});

                 $(item).css("width",liWidth * liLen + _config.addItemWidth);
             });

         }
     },
     _bindEnv: function() {
         var self = this,
             _config = self.config,
             _cache = self.cache;

         if($(_config.container).length > 0) {

             $(_config.container).each(function(index,item){

                 // 事件代理
                 $(item).unbind('click');
                 $(item).bind('click',function(e){

                     var target = e.target;

                     // 目前点击元素小于3个 用if else判断 否则的话 建议用switch
                     if($(target).hasClass(_config.prevBtn)){
                         self._prev($(this));

                     }else if($(target).hasClass(_config.nextBtn)){
                         self._next($(this));

                     }else {

                     }
                 });
             });
         }
     },
     _prev: function(container){
         var self = this,
             _config = self.config,
             _cache = self.cache;

         if(_cache.curIndex < 1) {
             return;
         }
         _cache.curIndex--;
         self._publicMethod(_cache.curIndex,container);

     },
     _next: function(container){
         var self = this,
             _config = self.config,
             _cache = self.cache;

         _cache.curIndex++;

         $(_config.scrollContainer).each(function(index,item){
             var liLen = $('li',item).length;
             if(_cache.curIndex >= liLen -2) {
                 _cache.curIndex = liLen -3;
                 return;
             }
             self._publicMethod(_cache.curIndex,container);
         });

     },
     _publicMethod: function(curIndex,container){
         var self = this,
             _config = self.config,
             _cache = self.cache;

         $(_config.scrollContainer,container).each(function(index,item){
             var liWidth = $('li',item).outerWidth(),
                 liHeight = $('li',item).outerHeight(),
                 liLen = $('li',item).length;

             self._prevNextProcess({ulContainer:item,liW:liWidth,liH:liHeight,liLen:liLen,index:curIndex});
         });
     },
     _prevNextProcess: function(cfg) {
         var self = this,
             _config = self.config,
             _cache = self.cache;

         var curLi = $('li',cfg.ulContainer)[cfg.index + 1];
         $('li',cfg.ulContainer).each(function(index,item){
             $(item).css({'width':_config.changeBeforeWH.width,'height':_config.changeBeforeWH.height});
         });
         $(curLi).animate({'width':_config.changeAfterWH.width,'height':_config.changeAfterWH.height});
         $(cfg.ulContainer).animate({'left':-cfg.index * cfg.liW},function(){

         });
         var cindex = cfg.index + 2;
         _config.callback && $.isFunction(_config.callback) && _config.callback(cindex);

     }
 };
 // 初始化代码
 $(function(){
     new LeftAndRight({
         callback: function(index){
             //console.log(index);
         }
     });
 });

JS实现类似于图片3D效果