Question

我有一个包含3个div的容器，里面有溢出的图像：隐藏;这个容器有100％的宽度和高度350px。里面有3个div，带有背景图片。每个div具有100％宽度和与容器相同的高度。全部对齐到第一个div的右侧，因为我想为它制作动画并制作一个滑块。每个div的简单bg图像+文本滑块。

我的实际代码：

HTML

<div id="container">
   <div id="banner1">
      <h3 class="bannerText">Text1</h3>
   </div>

   <div id="banner2">
      <h3 class="bannerText">Text1</h3>
   </div>

   <div id="banner3">
      <h3 class="bannerText">Text1</h3>
   </div>
</div>

CSS

#container {
width: 100%;
height: 350px;
position: relative;
overflow: hidden;
display: inline-block;
}

#banner1 {
width: 100%;
height: 350px;
background-image: url("../images/banner1.jpg");
background-color: red;
background-size: cover;
background-position: center center;
position: relative;
float: left;
animation: slide 10s ease-in-out infinite;
}

#banner2 {
width: 100%;
height: 350px;
background-image: url("../images/banner2.jpg");
background-color: fuchsia;
background-size: cover;
background-position: center center;
position: relative;
float: left;
}

#banner3 {
width: 100%;
height: 350px;
background-image: url("../images/banner3.jpg");
background-color: green;
background-size: cover;
background-position: center center;
position: relative;
float: left;
}

bannerText {
color: #fff;
position: absolute;
top: 50%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
}

@keyframes slide{
10%{
transform:translateX(0);
}
15%, 30%{
transform:translateX(-100%);
}
35%, 50%{
transform:translateX(-200%);
}
55%, 70%{
transform:translateX(-300%);
}
75%, 90%{
transform:translateX(0);
}

}

有人可以帮我解决这个问题吗？我也需要它在iphone上工作：）

Answer 1

你的幻灯片是什么？可能就像这样

https://codepen.io/dudleystorey/pen/ehKpi

<base href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/">
<div id="slider">
<figure>
<img src="austin-fireworks.jpg" alt>
<img src="taj-mahal_copy.jpg" alt>
<img src="ibiza.jpg" alt>
<img src="ankor-wat.jpg" alt>
<img src="austin-fireworks.jpg" alt>
</figure>

同一行上的Flex图像，但每个100％

1 个答案: