javascript - JavaScript slide, text disappear and center fix

Question

I have a few problems with my code: HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <script class="jsbin" src="js/jquery.min.js"></script>
        <link href="css/stylesheet.css" rel="stylesheet" type="text/css" />
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Bellevue</title>
    </head>

    <body>
    <div id="container">
        <div id="gallery">
            <center>
            <div id="slider">
              <img src="images/1.jpg">
              <img src="images/2.jpg">
              <img src="images/1.jpg">
            </div>
            </center>
            <div id="nav">
            <ul>
              <li class="active">Go to slide 1</li>
              <li>Go to slide 2</li>
              <li>Go to slide 3</li>
            </ul>
            </div>

            <div id="info">
              <div class="info"><h3>Info panel 1</h3></div>
              <div class="info"><h3>Info panel 2</h3></div>
              <div class="info"><h3>Info panel 3</h3></div>

            </div>
        </div>
    </div>
    <div id="lengte"></div>
    <script>
    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');
    });
    </script>

    </body>
</html>

CSS:

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

*{
    margin:0px;
}

  body{
    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;
      margin-left:auto;
      margin-right:auto;
      position:absolute;
  }
  #slider img{
    position:relative;
    float:left;
  }
  #lengte{
      width:350px;
  }
  #nav{
    width:100%;
    z-index:2;
    position:absolute;
    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{
    position:absolute;
    top:350px;
    height:140px;
    width:100%;
    background:#eee;
  }

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

Problems:

The images slide nicely up and down, but they are not centred
The text disappears have slide form right to left, but i can't them. I see the next picture
The whole page isn't at top. You see some white space on top

Can someone help me with (one of these) problems?

Links: http://jsfiddle.net/FYgE5/ http://www.wouterschaeffer.nl/bellevue/poging3

score 0 · Accepted Answer

要解决第一个问题：您的滑块需要一个包装 div 'window'，一次只能显示一个图像。您应该将包装 div 居中，而不是将幻灯片居中。

<div class="slider-wrapper">
    <div id="slider">

消除：

<center>...</center>

上面的CSS：

.slider-wrapper {
    position: relative;
    width:680px;
    margin: 0 auto;
}

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

#nav ul {
    padding: 0;
}

当您也将#info 从页面上滑出时，您需要为其使用包装器 div：

<div class="info-wrapper">
    <div id="info">

上面的CSS：

.info-wrapper {
    position: absolute;
    top:350px;
    height:140px;
    width: 100%;
}
#info {
    position:absolute;
    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/

javascript - JavaScript slide, text disappear and center fix

1 回答 1

Related

Reference