我编写了一个运行良好的 slider 。我本来想加字幕，但是不行。我究竟做错了什么？ 该跨度在 Firefox Developer Edition 中确实显示正确，但它没有显示在屏幕上。 CSS 不正确吗？或者 JavaScript 不可以这样工作吗？ 谢谢你的帮助! http://www.holymountstudios.com/index.php
Javascript:
// PICTURE SLIDER ON MAIN PAGE
function mainPageSlider(imgArray, duration) {
var curIndex = 0,
imgDuration = duration,
slider = document.getElementById("slider"),
slides = slider.childNodes;
buildSlideShow(imgArray);
slideShow();
function buildSlideShow(arr) {
for (i = 0; i < arr.length; i++) {
var img = document.createElement('img');
img.src = arr[i][0];
var desc_span = document.createElement('span');
var desc_spanClass = desc_span.setAttribute('class', 'img_desc');
var desc = document.createTextNode(arr[i][1]);
desc_span.appendChild(desc);
img.appendChild(desc_span);
slider.appendChild(img);
}
}
function slideShow() {
function fadeIn(e) {
e.className = "fadeIn";
};
function fadeOut(e) {
e.className = "";
};
fadeOut(slides[curIndex]);
curIndex++;
if (curIndex === slides.length) {
curIndex = 0;
}
fadeIn(slides[curIndex]);
setTimeout(slideShow, imgDuration);
};
}
CSS:
#slider {
position: static;
height: 100%;
width: 100%;
overflow: hidden;
}
#slider img {
transition: opacity 2.2s;
position: absolute;
top:0;
left:0;
opacity:0;
height: 100%;
width: 100%;
/* padding-top: 60px; */
object-fit: cover;
}
#slider img.fadeIn {
opacity:1;
}
#slider .img_desc, .img_desc {
font-size: 50px;
color: white;
z-index: 5000;
background-color: red;
height: 500px;
width: 90%;
margin: 100px 0px;
display: inline-block;
opacity: 1;
position: absolute;
line-height:100px;
}
HTML:
<body onload="mainPageSlider([
['', 'Studio'],
['images/Fotos/2016-02-01_15.36.22.jpg', 'etwas anderes'],
],
2000)">
<span class = img_desc>Hello</span>
我删除了该img的一个引用链接，以查看标题是否被该img隐藏，事实并非如此。我在下面添加了一个具有相同类的跨度，以确保我正确地执行了 CSS。 当前的标题 CSS (.img_desc) 是我尝试过的一些内容的随机集合。
最佳答案
解决方案:
我将相关的Javascript函数更改为
function buildSlideShow(arr) {
for (i = 0; i < arr.length; i++) {
var img_with_desc = document.createElement('div');
var img = document.createElement('img');
var img_with_descClass = img_with_desc.setAttribute('class', 'main_img');
img.src = arr[i][0];
var desc_span = document.createElement('span');
var desc_spanClass = desc_span.setAttribute('class', 'img_desc');
var desc = document.createTextNode(arr[i][1]);
desc_span.appendChild(desc);
img_with_desc.appendChild(img);
img_with_desc.appendChild(desc_span);
slider.appendChild(img_with_desc);
}
和 CSS
#slider {
position: static;
height: 100%;
width: 100%;
overflow: hidden;
}
#slider img {
transition: opacity 2.2s;
position: absolute;
top:0;
left:0;
opacity:0;
height: 100%;
width: 100%;
z-index: 1;
/* padding-top: 200px; */
object-fit: cover;
}
.img_desc, #slider .fadeIn .img_desc {
font-size: 36px;
color: white;
background-color: #aaa;
z-index: 2;
padding: 10px;
left:100px;
bottom: 50px;
left: 50%;
width: 60%;
margin-left: -30%;
text-align: center;
opacity: 0;
position: absolute;
object-fit: cover;
background: rgb(54, 25, 25); /* Fall-back for browsers that don't
support rgba */
background: rgba(54, 25, 25, .1);
}
#slider .fadeIn .img_desc {
-webkit-animation: fadein 4s; /* Safari, Chrome and Opera > 12.1 */
-moz-animation: fadein 4s; /* Firefox < 16 */
-ms-animation: fadein 4s; /* Internet Explorer */
-o-animation: fadein 4s; /* Opera < 12.1 */
animation: fadein 4s;
}
@keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Firefox < 16 */
@-moz-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Internet Explorer */
@-ms-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Opera < 12.1 */
@-o-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
#slider .fadeIn img, #slider .fadeIn .img_desc {
opacity:1;
}
淡入只是为了更好的行为。
关于带标题的 Javascript 图像 slider - 标题不显示，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47094932/