Question

我编写了一个效果很好的滑块。我打算有字幕，但这不起作用。我究竟做错了什么？该扩展程序确实在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的一个ref链接，以查看img是否隐藏了标题，但事实并非如此。我在下面添加了一个具有相同类的span，以确保我正确地执行了CSS。标题的当前CSS（.img_desc）是我尝试过的非常随机的集合。

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 个答案: