这是我对其进行了一些修改的代码,以便使用仅使用HTML和CSS的图像进行简单的幻灯片:
(这是查看全部代码的一部分,请单击演示(
代码:
.slideshow {
width: 800px;
margin: 0 auto;
overflow: hidden;
border: solid 1px white;
}
.slideshow-container {
width: 2500px;
font-size: 0;
transition: 1s ease;
height: 225px;
}
@keyframes slide {
0% {
transform: translateX(0%);
}
12.5% {
transform: translateX(0%);
}
25% {
transform: translateX(-25%);
}
37.5% {
transform: translateX(-25%);
}
50% {
transform: translateX(-50%);
}
62.5% {
transform: translateX(-50%);
}
75% {
transform: translateX(-75%);
}
87.5% {
transform: translateX(-75%);
}
99% {
transform: translateX(-75%);
}
100% {
transform: translateX(0);
}
}
<section class="slideshow">
<div class="slideshow-container slide">
<img src="http://placeimg.com/625/225/any" />
<img src="http://placeimg.com/625/225/animals" />
<img src="http://placeimg.com/625/225/arch" />
</div>
</section>
演示
我想在每个图像旁边添加一个文本,因此在框架中,我将拥有一半的图像和另一半文本。我该如何实现?
您将 image
和 text
零件包含在 .item
div中。
将 display:flex
应用于父 .slideshow-container
,以将.item
设置为行。
然后只需将width:50%
应用于您的img
和.caption
DIV即可对齐屏幕的一半
还根据3个项目更改了动画动画分区值
小提琴链接
堆栈smippet
/*general styles*/
body {
padding: 3em;
background-color: #ccc;
}
html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
/*slideshow styles*/
.slideshow {
width: 800px;
margin: 0 auto;
overflow: hidden;
border: solid 1px white;
}
.item {
display: flex;
width: 800px;
align-items: center;
}
.slideshow-container {
width: 2400px;
transition: 1s ease;
display: flex;
}
.slideshow-container:hover {
animation-play-state: paused;
}
.slide {
animation: slide 24s ease infinite;
}
@keyframes slide {
0% {
transform: translateX(0%);
}
25% {
transform: translateX(0);
}
37.5% {
transform: translateX(-33.333%);
}
62.5% {
transform: translateX(-33.333%);
}
75% {
transform: translateX(-66.667%);
}
99% {
transform: translateX(-66.667%);
}
100% {
transform: translateX(0);
}
}
.item img {
width: 50%
}
.item .caption {
width: 50%
}
<!--hovering over the images will pause the slideshow -->
<section class="slideshow">
<div class="slideshow-container slide">
<div class="item">
<img src="http://placeimg.com/625/225/any" />
<div class="caption">Text</div>
</div>
<div class="item">
<img src="http://placeimg.com/625/225/animals" />
<div class="caption">Text</div>
</div>
<div class="item">
<img src="http://placeimg.com/625/225/arch" />
<div class="caption">Text</div>
</div>
</div>
</section>