带字幕的Javascript图片滑块-字幕不显示

Question

我编写了一个效果很好的滑块。 我打算添加字幕，但这是行不通的。 我究竟做错了什么？ 跨度确实在Firefox开发人员版中正确显示，但没有显示在屏幕上。 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的ref链接之一，以便查看字幕是否被img隐藏了，情况并非如此。 我在下面进一步添加了具有相同类的span，以确保我正确地执行了CSS。 字幕（.img_desc）的当前CSS是我尝试过的东西的相当随机的集合。

Answer 1

解：

我将相关的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图片滑块-字幕不显示

问题描述

1 个解决方案

解决方案1
0 2017-11-03 15:11:06

带字幕的Javascript图片滑块-字幕不显示

问题描述

1 个解决方案

解决方案1 0 2017-11-03 15:11:06

解决方案1
0 2017-11-03 15:11:06