Я запрограммировал ползунок, который хорошо работает. Я намереваюсь иметь подписи, но это не работает. Что я делаю неправильно? Диапазон правильно отображается в 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) представляет собой довольно случайный набор вещей, которые я пробовал.
#slider .img_desc, .img_desc { left:0; bottom:0;}
- person Minal Chauhan   schedule 03.11.2017