html - 用 div 滚动 x

Question

我想用自己的方式制作一些 slider ，但似乎有些问题:

我有:

<div class="slider">
<div class="img first"></div>
<div class="img second"></div>
<div class="img third"></div>
</div>

.slider{width: 100%; max-height: 100%; overflow: hidden;} 
//I don't want to see scrolls
.img{width: 100%; height: 100%; float: left;}
.first{background: red;}
.second{background: blue;}
.third{background: green;}

基本上我想要的是:

  100%     100%    100%
+-------+--------+-------+
+-------+ 
| 100%  |
|first  | second   third
+-------+
+------------------------+

问题是我的 div 一个接一个地移动.. float: left 有问题吗？

Answer 1

从您上面的代码向我解释的内容来看，您的 slider 的每张幻灯片看起来都将是一张图片。如果是这样，我建议将您的 slider 更改为以下代码:

代码片段:

.slider {
  width: 100%;
  max-width: 960px;
  overflow: hidden;
}

.slider figure img {
  width: 25%;
  float: left;
  height: auto;
}

.slider figure {
  width: 400%;
  position: relative;
  margin: 0;
  padding: 0;
  animation: 10s slide infinite;
  -webkit-animation: 10s slide infinite;
}

@-webkit-keyframes slide {
  0% {
    left: 0%;
  }
  16% {
    left: 0%;
  }
  33% {
    left: -100%;
  }
  49% {
    left: -100%;
  }
  66% {
    left: -200%;
  }
  82% {
    left: -200%;
  }
  100% {
    left: -300%;
  }
}

<div class="slider">
  <figure>
    <img src="https://i.ytimg.com/vi/mxbzT3uYXxE/maxresdefault.jpg">
    <img src="http://cdn.playbuzz.com/cdn/1af8dfed-eacb-4228-8219-8781715daa2d/115aad8d-8eee-45e4-b439-450602e843fd.jpg">
    <img src="http://www.majorspoilers.com/wp-content/uploads/2011/08/MSC6.jpg">
    <img src="http://static.srcdn.com/wp-content/uploads/franklin-richards.jpg">
  </figure>
</div>

与其每次都使用特定的 DIV 来调用您的 img 类，我们还可以只使用实际的 img 标签。除此之外，在这种方法中，我使用了 keyframes CSS 来控制幻灯片图像的定位。

如果你真的想用 div 内容来控制它，你可以简单地将图像包装在你的 div 中并改变类 .slider figure img 到 .slider figure div 以包含其他类型的内容。

我希望这对您的努力有所帮助。