キャプション付きJavaScriptイメージスライダ - キャプションが表示されない

うまく動作するスライダをプログラミングしました。私はキャプションを持っているつもりですが、それは動作しません。私は間違って何をしていますか？ Firefox Developer Editionではスパンが正しく表示されますが、画面には表示されません。 CSSは間違っていますか？それともJavascriptでこれほどうまく動かないのですか？助けてくれてありがとう！ http://www.holymountstudios.com/index.php キャプション付きJavaScriptイメージスライダ - キャプションが表示されない

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：私はどうかを確認するためには、IMGのrefリンクのいずれかを削除した

<body onload="mainPageSlider([ 
    ['', 'Studio'], 
    ['images/Fotos/2016-02-01_15.36.22.jpg', 'etwas anderes'], 
    ], 
    2000)"> 

<span class = img_desc>Hello</span>

キャプションはimgによって隠されていましたが、そうではありませんでした。私は下に同じクラスのスパンを追加して、CSSを正しく行っていることを確認しました。キャプションの現在のCSS（.img_desc）は、私が試したことのある無作為なコレクションです。

出典

2017-11-03 Rumi

キャプションの位置を設定してください：left、right、top、bottom： '#slider .img_desc、.img_desc {left：0;ボトム：0;} ' –

あなたの返信ありがとうございました、ミナル・シャウハン、それは動作していないようです - まだキャプションはありません。 – Rumi

CSSは問題ないようですが、問題はキャプションがimgの子として追加されていることにあります。 – Rumi

ソリューション：

私はフェードインがちょうどよりよい行動のためである

#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; 
}

に

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に関連するJavaScript関数を変更しました。

出典

2017-11-03 15:11:06 Rumi

キャプション付きJavaScriptイメージスライダ - キャプションが表示されない

答えて

関連する問題