Question

我一直在youtube上关于如何制作JQuery图像滑块的教程。我似乎遇到了我的代码问题，但我似乎无法解决原因。

我希望图像是屏幕的整个宽度，类似于苹果在网站上的表现。 apple website

我已尝试将所有内容的宽度设为100％，但这会破坏我的滑块。

$(function() {

  //variables 
  var width = $('img').width();
  var animationSpeed = 500;
  var pause = 4000;
  var currentSlide = 1;
  var interval;

  var $slider = $("#slider");
  var $slideContainer = $slider.find(".slides");
  var $slides = $slideContainer.find(".slide");

  function startSlider() {
    interval = setInterval(function() {
      $slideContainer.animate({
        "margin-left": "-=" + width
      }, animationSpeed, function() {
        currentSlide++;
        if (currentSlide === $slides.length) {
          currentSlide = 1;
          $slideContainer.css('margin-left', 0);
        }
      });
    }, pause);
  }

  function stopSlider() {
    clearInterval(interval);
  }

  $slider.on('mouseenter', stopSlider).on('mouseleave', startSlider);

  startSlider();
});

@import url(https://fonts.googleapis.com/css?family=Pacifico);
 body {
  margin: 0px;
  background: #e6e6e6;
  color: white;
}
header {
  width: 100%;
  background: rgba(0, 0, 0, 0.7);
  color: #e6e6e6;
  padding: 1px;
  position: fixed;
  z-index: 999;
  font-size: 100%;
  text-align: center;
}
nav {
  margin: 1;
  display: inline;
  white-space: nowrap;
}
#webSiteName {
  font-size: 1em;
  display: inline;
  padding: 40px;
  font-family: 'Pacifico', cursive;
}
.pages {
  font-size: 0.7em;
  color: white;
  list-style-type: none;
  display: inline-block;
  padding: 10px 40px;
  text-decoration: none;
  font-family: arial;
}
.pages:hover {
  color: #a6a6a6;
  cursor: pointer;
}
#slider {
  width: 720px;
  height: 400px;
  overflow: hidden;
}
#slider .slides {
  display: block;
  width: 6000px;
  height: 400px;
  margin: 0;
  padding: 0;
}
#slider .slide {
  float: left;
  list-style-type: none;
  width: 720px;
  height: 400px;
}
img {
  width: 720px;
  height: 400px;
}
/*# sourceMappingURL=stylesheet.css.map */

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>

<head>
  <title>Example Website</title>
  <link rel="stylesheet" type="text/css" href="css/stylesheet.css">
</head>

<body>
  <header>
    <nav>
      <a href='' id='webSiteName' class='pages'>Example</a>
      <a href='' class='pages'>Page</a>
      <a href='' class='pages'>Page</a>
      <a href='' class='pages'>Page</a>
      <a href='' class='pages'>Page</a>
    </nav>
  </header>

  <div id="slider">
    <ul class="slides">
      <li class="slide">
        <img src="images/slider1.png" />
      </li>
      <li class="slide">
        <img src="images/slider2.jpg" />
      </li>
      <li class="slide">
        <img src="images/slider3.jpg" />
      </li>
      <li class="slide">
        <img src="images/slider1.png" />
      </li>
    </ul>
  </div>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <script src="js/script.js"></script>
</body>

</html>

Answer 1

所以，

首先，您必须按width: 720px设置所有100%。但是如果你这样做，你的.slide做100％的父母（所以6000px）。通往大的方式..

所以我在#slider添加了参考尺寸（通过添加position:relative，他的尺寸为100%）。通过使用width: 100vw;，您可以对视口宽度进行反射（由position:relative定义;）

现在，你有一个很好的100％工作幻灯片。但是当用户调整大小时它不起作用。所以，＃1我在调整大小时添加了一个触发器，以更新width变量，并更新css。并且＃2，根据width和currentSlide重新计算保证金（当用户重新设置并查看保证金为-99999px时，尝试仍以相对保证金进行;）

Final JSFiddle

Answer 2

您需要在某些元素上设置width:100%，特别是滑块，幻灯片和图片。

#slider {
  width: 100%;
  overflow: hidden;
}
#slider .slides {
  display: block;
  width: 100%;
  height: 400px;
  margin: 0;
  padding: 0;
  float:left;
}

#slider .slide {
  float: left;
  list-style-type: none;
  width: 100%;
  height: 400px;
}
img {
  width: 100%;
  height: 400px;
}

这是 JSFiddle ，图片为红色，100％，以便您可以看到它们。

如何将JQuery图像滑块设置为屏幕宽度？

2 个答案: