Question

我为我的网站创建滑块，但它的效果很好。问题是当图像向下滑动时，它会扩大我的网站高度。怎么解决？滑块位于网站底部的#opinionsPanel内。我把完整的项目放在https://github.com/mituraTomasz/stronka/tree/master/stronka上。请帮忙！

＆＃13;

$(document).ready(function() {

  var duration = 10000;
  var imageUrl = "/img/slider/slider";
  var counter = 1;

  function runSlider() {

    if (counter == 4) {
      counter = 1;
    } else {
      counter++;
    }
    $("#slider").fadeOut("fast", function() {
      $("#slider")
        .html("<img src=" + imageUrl + counter + ".jpg  alt='slider'>")
        .fadeIn("fast", "linear");

      if (counter % 2 == 1) {
        $("#slider img")
          .animate({
            top: '-=400px'
          }, 0)
          .animate({
            top: '+=400px'
          }, duration);
      } else {
        $("#slider img").animate({
          top: '-=400px'
        }, duration);
      }
    });

  }
  runSlider();
  setInterval(runSlider, duration + 1000);


});

＆＃13;

body{
  height: 700px;
  background-color: brown;
  
}

#slider {
  padding: 0;
  margin: 0;
  width: 100%;
  height: 600px;
  filter: blur(2px);
  //background-size:cover;
  //background-position: 50%;

}
img {
  background-size: cover;
  position: absolute;
  //top: 2200px;
  //vertical-align: top;
  //overflow:hidden;
  z-index: -1;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>

  <div id="opinionsPanel">
    <div id="opinionsContent">
      <div id="slider">
      </div>
      <p><span></span>
      </p>
    </div>
  </div>

</body>

＆＃13;

Answer 1

你的css有.img { top: 2200px }这会将所有图片从顶部放置2200像素。这就是为什么页面的高度是巨大的。

滑块图像放大网站高度

1 个答案: