Question

我的代码存在一些问题： 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%;
  }

问题：

图像上下滑动很好，但它们没有居中
文字消失，从右到左有滑动形式，但我不能。我看到下一张图片
整页不在顶部。你在顶部看到一些空白

有人可以帮助我（其中一个）问题吗？

链接： http://jsfiddle.net/FYgE5/ http://www.wouterschaeffer.nl/bellevue/poging3

Answer 1

解决第一个问题：你的滑块需要一个包装div'窗口'，它只允许一次显示一个图像。您应该将包装器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幻灯片，文本消失和中心修复

1 个答案: