html - 在每张幻灯片上插入文本
问题描述
我做了一个简单的幻灯片。我想在每张幻灯片上插入一个文本。以便通过单击每个按钮(幻灯片 1、幻灯片 2 等)显示特定的文本。(请不要使用javascript)。“ slider-side”类包含所有应该显示的文本。
显示的文字应放在照片上。
我想要如下图的最终结果
.slider {
width: 100%;
height: auto;
float: right;
overflow: hidden;
}
.slider img {
float: left;
top: 0;
left: 0;
transition: opacity 0.5s ease-out;
opacity: 0;
width: 0%;
height: auto;
}
.slider input[type="radio"] {
display: none;
}
.slider input:checked + img {
opacity: 1;
z-index: 1;
width: 100%;
}
.slider .controls {
position: relative;
top: 0;
left: 0;
z-index: 2;
width: 100%;
height: 30px;
float: left;
}
.slider label {
background: rgba(0,0,0,0.8);
color: #fff;
padding: 10px;
display: inline-block;
cursor: pointer;
}
<div class="slider">
<input type="radio" id="slide1" name="radio" checked>
<img src="http://xup.ir/images/39359184745003103315.jpg" />
<div class="slider-side">
<span class="title">title1</span>
<span class="subTitle">subTitle2</span>
</div>
<input type="radio" id="slide2" name="radio">
<img src="http://xup.ir/images/70934477928759834031.jpg">
<div class="slider-side">
<span class="title">title2</span>
<span class="subTitle">subTitle2</span>
</div>
<input type="radio" id="slide3" name="radio">
<img src="http://xup.ir/images/13016878203236126642.jpg">
<div class="slider-side">
<span class="title">title3</span>
<span class="subTitle">subTitle3</span>
</div>
<div class="controls">
<label for="slide1">slide1</label>
<label for="slide2">slide2</label>
<label for="slide3">slide3</label>
</div>
</div>
解决方案
您可以通过包裹和一些样式checkboxes
来达到预期的效果div
.slider {
width: 100%;
height: auto;
float: right;
overflow: hidden;
position: relative;
}
.slider img {
float: left;
top: 0;
left: 0;
transition: opacity 0.5s ease-out;
opacity: 0;
width: 0%;
height: auto;
}
.slider input[type="radio"] {
display: none;
}
.slider input:checked+img {
opacity: 1;
z-index: 1;
width: 100%;
}
.slider input:checked~.slider-side {
display: block;
}
.slider .controls {
position: relative;
top: 0;
left: 0;
z-index: 2;
width: 100%;
height: 30px;
float: left;
}
.slider label {
background: rgba(0, 0, 0, 0.8);
color: #fff;
padding: 10px;
display: inline-block;
cursor: pointer;
}
.slider-side {
position: absolute;
right: 0;
background: rgba(255, 255, 255, 0.1);
color: #fff;
top: 0;
bottom: 0;
height: 100%;
padding: 100px;
display: none;
}
.slider-side .title {
display: block;
font-size: 30px;
}
<div class="slider">
<div>
<input type="radio" id="slide1" name="radio" checked>
<img src="http://xup.ir/images/39359184745003103315.jpg" />
<div class="slider-side">
<span class="title">title1</span>
<span class="subTitle">subTitle1</span>
</div>
</div>
<div>
<input type="radio" id="slide2" name="radio">
<img src="http://xup.ir/images/70934477928759834031.jpg">
<div class="slider-side">
<span class="title">title2</span>
<span class="subTitle">subTitle2</span>
</div>
</div>
<div>
<input type="radio" id="slide3" name="radio">
<img src="http://xup.ir/images/13016878203236126642.jpg">
<div class="slider-side">
<span class="title">title3</span>
<span class="subTitle">subTitle3</span>
</div>
<div class="controls">
<label for="slide1">slide1</label>
<label for="slide2">slide2</label>
<label for="slide3">slide3</label>
</div>
</div>
</div>
推荐阅读
- postgresql - 如何使用Netcat检查postgresql docker容器是否已启动
- apache-spark - 是否可以在火花中插入临时表?
- bash - 循环但输出被引用的行
- python - Django下拉列表依赖于模型?
- microsoft-graph-api - 无法以 Iana 格式获取支持的时区
- java - 随后在 BLE Android 应用程序中调用 disconnect() 和 close() 是正确的方法吗?
- java - 如何将一个 Eclipse 项目的方法/变量调用到另一个 Eclipse 项目?
- apache-camel - Apache Camel文件端点:Camel测试调用直接组件路由将文件从文件夹A复制到文件夹B
- python - .split() 与 json 文件返回 keyerror
- typescript - 使用 TypeScript 的 CreateJS