我的代码有几个问题:HTML:

    <đầu>
        
        
        
        
    

    
    

        

            
            

              
              
              
            

            
            

            

              
Go to slide 1

              
Go to slide 2

              
Go to slide 3

            

            


            

              
Info panel 1

              
Info panel 2

              
Info panel 3


            

        

    

    

    
    var imgN = "95%";
    var galW = $('#gallery').outerWidth(true);
    var galL = $('#lengte').outerWidth(true);

    $('#slider, #info').width(galW*imgN);

    $('#nav li').click(function(){
      var ind = $(this).index();
      $('#slider').stop(1).animate({top: '-'+galL*ind },1500);
      $('#info').stop(1).animate({left: '-'+galW*ind },1500);
      $(this).addClass('active').siblings('li').removeClass('active');
    });
    

    

CSS:

@charset "utf-8";
/* CSS Document */

*{
    margin:0px;
}

  thân hình{
    font-family:Arial, Verdana, Helvetica, sans-serif;
    background-color: #FFF;
    margin:0px;
    padding:0px;
  }

#container{
    margin-left:5%;
    margin-right:5%;
}

/*slider*/
  article, aside, figure, footer, header, hgroup, 
  menu, nav, section { display: block; }


  #gallery{
    width:100%;
    height:490px;
    position:relative;
    margin:20px auto;
    background:#eee;
    overflow:hidden;
  }
  #slider{
      width:680px;
      lề trái:tự động;
      lề phải:tự động;
      vị trí: tuyệt đối;
  }
  #slider img{
    position:relative;
    float:left;
  }
  #lengte{
      width:350px;
  }
  #nav{
    width:100%;
    z-index:2;
    vị trí: tuyệt đối;
    top:305px;
    text-align:center;
  }
  #nav li{
    cursor:pointer;
    display:inline;
    background:#ddd;
    padding:10px;
    margin:1px;
    border-bottom:1px solid #999;
    -moz-border-radius-topleft: 6px;
    -moz-border-radius-topright: 6px;
    -moz-border-radius-bottomright: 0px;
    -moz-border-radius-bottomleft: 0px;
    -webkit-border-radius: 6px 6px 0px 0px;
    border-radius: 6px 6px 0px 0px; 
  }
  #nav li.active{
    background:#eee;
    border-bottom:1px solid #eee;
  }

  #info{
    vị trí: tuyệt đối;
    top:350px;
    height:140px;
    width:100%;
    background:#eee;
  }

  div.info{
    position:relative;
    float:left;
    padding:10px 25px;
    height:120px;
    width:100%;
  }

câu hỏi:

1. 图片可以很好地上下滑动，但没有居中
2. 文本以从右到左的幻灯片形式消失，但我做不到。我看到下一张图片
3. 整个页面不在顶部。你看到顶部有一些空白

有人可以帮我解决(其中一个)问题吗？

Liên kết: http://jsfiddle.net/FYgE5/ http://www.wouterschaeffer.nl/bellevue/poging3

1 Câu trả lời

要解决第一个问题:您的 slider 需要一个包装器 div“窗口”，一次只能显示一个图像。您应该将包装器 div 居中，而不是将幻灯片居中。

删除:

...

上面的CSS:

.slider-wrapper {
    vị trí: tương đối;
    width:680px;
    margin: 0 auto;
}

此外，从 nav ul 中删除填充，因为它会将其推离中心:

#nav ul {
    đệm: 0;
}

---

由于您也将#info 滑出页面，因此您需要为其使用包装器 div:

上面的CSS:

.info-wrapper {
    vị trí: tuyệt đối;
    top:350px;
    height:140px;
    width: 100%;
}
#info {
    vị trí: tuyệt đối;
    top: 0px;
    left: 0px;
    width: 300%;
    background:#eee;
}
div.info {
    float:left;
    padding:10px 0;
    height:120px;
    width: 33.33%;
}
div.info h3 {
    padding:0 25px;
}

---

要删除顶部的边距，请从#gallery 中删除 margin-top:

#gallery {
    margin: 0 auto 20px;

---

最终产品:

http://jsfiddle.net/FYgE5/8/