我想放大我的Jquery滑块中心图片

Question

嗨，我正在使用Jquery制作一个照片滑块。我的滑块工作得很好，但是我想放大我的滑块中心图片，例如

通过增加20px的宽度和高度，使其看起来像IOS唱片库。当您向右滑动时，它将使以前的中心图片成为其正常大小，并放大新的中心图片。我已经在=> http://jsfiddle.net/jdDYQ/4/上设置了滑块。

如果有人可以告诉我如何使这个功能，我已经开始在上面的链接。谢谢你？

JS

var index = 0;

$('.next').click(function(){
var photoWidth = parseInt($(".mf1_ui li:eq("+index+")").css("width"),10);
if(index != 0) photoWidth += 2;

console.log(photoWidth);
if(-(parseInt($(".mf1_ui").css("left"),10)) < (parseInt($(".mf1_ui").css("width"),10) -  288)){
    
  $( '.mf1_ui' ).animate({
      left: "-="+photoWidth+"px"
  }, {
      duration: 1000,
      queue : false,
      step: function( now, fx ){
      }
  });
 index++;  
}
});
 $('.previous').click(function(){
    var photoWidth = parseInt($(".mf1_ui li:eq("+(index -   1)+")").css("width"),10);
    if(index != 0) photoWidth += 2; 
    
    if(parseInt($(".mf1_ui").css("left"),10) <= 0){
      $( '.mf1_ui' ).animate({
        left: "+="+photoWidth+"px"
      }, {
        duration: 1000,
        queue : false,
        step: function( now, fx ){
        } 
      }); 
      index--;
    }
 });    

Answer 1

嗨，我终于解决了滑块的问题，现在当你滑动的时候，中间的图片放大了。问题是我不能垂直居中。如果有人能告诉我如何将它垂直居中，以获得3D效果。

My slider => http://jsfiddle.net/jdDYQ/7/

谢谢

.wrapper{
overflow: hidden;
position: relative;
width: 288px;
height:108px;
left: 100px;
top: 100px;
}
ul{
   position: relative;
   list-style: none;
   margin: 0;
   padding: 0;
   z-index: 1;
   float: left;
   height: 100px;
  }
li{
   float: left;
   height: 88px;
   padding: 2px 1px;
  }
ul li:first-child {
    padding-left: 0;
  }
 .previous{
  width:20px;
  height:20px;
  position: absolute;
  left:0px;
  top:38px;
  background-color:black;
  z-index: 2;
  cursor:pointer;    
}
.next{
width:20px;
height:20px;
position: absolute;
right:0px;
top:38px;
background-color:black;
z-index: 2;
cursor:pointer;
}