Question

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

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

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

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

想法？

Answer 1

要解决您的问题，您需要在图像和标题周围添加一个更大的包装器，然后您可以将img和另一个div分隔为更大包装器内的标题（或者您也可以使用{{ 1}}标签，如果你想，但我更喜欢使用divs）

另请注意，一旦你制作了这样的包装器，就不需要使 .slider 的边框宽度如此之大（因为它只会在底部添加更多的空白空间）在你的标题下面），所以我把它改成10px。

我为您做了一个例子，我认为我解决了您的问题，并且我尽量让它尽可能接近您的代码。

这是小提琴：https://jsfiddle.net/6oxt5nfe/3/

Answer 2

我想看看你的问题是否有一个简单的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);
}

<强> HTML：

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

<强>使用Javascript：

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);

全部放在一起：

＆＃13;

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);

＆＃13;

.slider {
display:block;
position:relative;
margin: 50px auto;
width:100%;
max-width:400px;
max-height:600px;
overflow:hidden;
border: 11px solid #d3d3d3;
margin: 0 auto;
border: 25px solid #ffffff;
border-bottom-width: 80px;
transition: 3s box-shadow ease-in;
box-shadow: 0 0 200px 200px rgba(29, 25, 4, 1) inset, 0 0 3px 6px rgba(0, 0, 0, 0.07);
}

.image-container {
position:relative;
left:0;
-webkit-transition:left 0.3s;
-moz-transition:left 0.3s;
-ms-transition:left 0.3s;
transition:left 0.3s;
animation: slider 16s infinite;
}

.image-container img{
display:block;
float:left;
}

.four-images {
width:400%;
}

.four-images img {
width:25%;
}

@keyframes slider {
20%{left: 0%;}
25%,45%{left:-100%;}
50%,70%{left:-200%;}
75%,95%{left:-300%;}
}

.caption {
position: relative;
top: -65px;
padding: 6px;
text-align: center;
font-size: 24px;
line-height: 36px;
height: 36px;
color: rgba(0,0,0,1);
}

＆＃13;

<div class="slider">
<div class="image-container four-images">
<img src="https://storage.googleapis.com/risemedialibrary-f114ad26-949d-44b4-87e9-8528afc76ce4/imageslider/12.jpg">
<img src="https://storage.googleapis.com/risemedialibrary-f114ad26-949d-44b4-87e9-8528afc76ce4/imageslider/2.jpg">
<img src="https://storage.googleapis.com/risemedialibrary-f114ad26-949d-44b4-87e9-8528afc76ce4/imageslider/3.jpg">
<img src="https://storage.googleapis.com/risemedialibrary-f114ad26-949d-44b4-87e9-8528afc76ce4/imageslider/8.jpg">
</div>
</div>
<div class="caption"></div>

＆＃13;

你会如何为这些图片添加字幕？

2 个答案: