Html 您将如何为这些图像添加标题？

见：

对于每张幻灯片，我希望图像标题出现在宝丽来的底部。我该怎么办

我尝试在HTML中为每个img添加一个，但它只会影响一张幻灯片，而不会影响其他幻灯片

Example: .caption {
top 10%
position: absolute
;

<img src=x><div id=caption>this is the caption</div></img>

示例：。标题{
前10%
位置：绝对位置
;
这是标题

---

想法？

要解决您的问题，您需要在图像和标题周围添加一个较大的包装，然后您可以将img和另一个div分开，以便在较大的包装中显示标题（或者，如果您愿意，您也可以使用

标记，但我更喜欢使用div）

还要注意，一旦你做了这样一个包装器，你就不需要把你的边框宽度.slider设置得太大（因为它只会在标题下方的底部添加更多的空白），所以我把它改为10px

我为你做了一个例子，我认为它解决了你的问题，我试图使它尽可能接近你的代码

---

关键是：

我想看看是否有一个简单的javascript解决方案可以解决您的问题

以下是我的想法：

CSS:

.caption {
position: relative;
top: -65px;
padding: 6px;
text-align: center;
font-size: 24px;
line-height: 36px;
height: 36px;
color: rgba(0,0,0,1);
}

<div class="caption"></div>

var captions = ['Caption 1','Caption 2','Caption 3','Caption 4'];
var imageCaption = document.getElementsByClassName('caption')[0];
imageCaption.innerHTML = captions[0];
var photos = captions.length;
var n = 1;

setInterval(function(){
        imageCaption.innerHTML = captions[n];
        if (n === (photos - 1)) {n = 0;} else {n++;}
        },4000);

HTML:

.caption {
position: relative;
top: -65px;
padding: 6px;
text-align: center;
font-size: 24px;
line-height: 36px;
height: 36px;
color: rgba(0,0,0,1);
}

<div class="caption"></div>

var captions = ['Caption 1','Caption 2','Caption 3','Caption 4'];
var imageCaption = document.getElementsByClassName('caption')[0];
imageCaption.innerHTML = captions[0];
var photos = captions.length;
var n = 1;

setInterval(function(){
        imageCaption.innerHTML = captions[n];
        if (n === (photos - 1)) {n = 0;} else {n++;}
        },4000);

将所有内容放在一起：

.caption {
position: relative;
top: -65px;
padding: 6px;
text-align: center;
font-size: 24px;
line-height: 36px;
height: 36px;
color: rgba(0,0,0,1);
}

<div class="caption"></div>

var captions = ['Caption 1','Caption 2','Caption 3','Caption 4'];
var imageCaption = document.getElementsByClassName('caption')[0];
imageCaption.innerHTML = captions[0];
var photos = captions.length;
var n = 1;

setInterval(function(){
        imageCaption.innerHTML = captions[n];
        if (n === (photos - 1)) {n = 0;} else {n++;}
        },4000);

var captions=['Caption 1'、'Caption 2'、'Caption 3'、'Caption 4'；
var imageCaption=document.getElementsByClassName（'caption'）[0]；
imageCaption.innerHTML=字幕[0]；
var照片=标题。长度；
var n=1；
setInterval（函数（）{
imageCaption.innerHTML=字幕[n]；
如果（n==（照片-1））{n=0；}其他{n++；}
}，4000）；

滑块{
显示：块；
位置：相对位置；
保证金：50px自动；
宽度：100%；
最大宽度：400px；
最大高度：600px；
溢出：隐藏；
边框：11px实心#D3；
保证金：0自动；
边框：25px实心#ffffff；
边框底宽：80px；
过渡：3s盒阴影缓进；
盒影：0 0 200px 200px rgba（29,25,4,1）插图，0 0 3px 6px rgba（0,0,0,0.07）；
}
.图像容器{
位置：相对位置；
左：0；
-webkit转换：左0.3s；
-moz转换：左0.3s；
-ms转换：左0.3s；
过渡：左0.3s；
动画：滑块16s无穷大；
}
.图像容器img{
显示：块；
浮动：左；
}
.四张图片{
宽度：400%；
}
.四张图片{
宽度：25%；
}
@关键帧滑块{
20%{左：0%；}
25%，45%{左：-100%；}
50%，70%{左：-200%；}
75%，95%{左：-300%；}
}
.标题{
位置：相对位置；
顶部：-65px；
填充：6px；
文本对齐：居中；
字体大小：24px；
线高：36px；
高度：36px；
颜色：rgba（0,0,0,1）；
}

小提琴中的标题在哪里？已更新小提琴。请参阅CSS中的.caption。谢谢！您缺少

图像容器的结束标记

每个图像应包装在一个div中，该div具有使其看起来像宝丽来的样式。然后，您只需在包装器中的图像下方添加另一个div以包含标题：

Y你太棒了！太棒了。给你10块蛋糕！谢谢！