个人中心
gpt4 book ai didi

带标题的 Javascript 图像 slider - 标题不显示

转载 作者：行者123 更新时间：2023-11-28 04:01:11 25 4
gpt4 key购买 nike

我编写了一个运行良好的 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/

25 4 0
文章推荐： javascript - Bootstrap 不使用 jquery 动态创建的元素呈现
文章推荐： html - 无法在两个文件夹之间加载 css 和 Bootstrap
文章推荐： c++ - 读取键盘字符以确定快捷方式
文章推荐： javascript - 如何通过 Openwrt/LEDE 的 perl 提交该表单
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com