Question

您好我正在使用Jquery处理照片滑块。我的滑块工作得很好，但是我想放大我的滑块中央图片，例如

添加20px的宽度和高度，使其看起来像IOS相册库。向右滑动时，它会将之前的中心图像作为正常尺寸，并放大新的中央图像。我已将滑块设为=＆gt; 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效果我的滑块=＆gt; 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;
}

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

JS

1 个答案: