帶字幕的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