如何使圖像幻燈片顯示在固定標題下方
[英]How can i make the image slideshow appear beneath a fixed header
問題描述
我正在做一個網站項目，網站的標題是固定的。 但是，當我嘗試在標題下方立即添加照片幻燈片時，我遇到了幻燈片容器浮動在標題頂部的問題。 同時頁面上的所有其他元素都位於標題下。 如果有人能想出解決這個問題的方法，我將不勝感激。 下面是代碼。
var slideIndex = 1; var myTimer; var slideshowContainer; window.addEventListener("load",function() { showSlides(slideIndex); myTimer = setInterval(function(){plusSlides(1)}, 4000); slideshowContainer = document.getElementsByClassName('slideshow-container')[0]; slideshowContainer.addEventListener('mouseenter', pause) slideshowContainer.addEventListener('mouseleave', resume) }) // NEXT AND PREVIOUS CONTROL function plusSlides(n){ clearInterval(myTimer); if (n < 0){ showSlides(slideIndex -= 1); } else { showSlides(slideIndex += 1); } //COMMENT OUT THE LINES BELOW TO KEEP ARROWS PART OF MOUSEENTER PAUSE/RESUME if (n === -1){ myTimer = setInterval(function(){plusSlides(n + 2)}, 4000); } else { myTimer = setInterval(function(){plusSlides(n + 1)}, 4000); } } //Controls the current slide and resets interval if needed function currentSlide(n){ clearInterval(myTimer); myTimer = setInterval(function(){plusSlides(n + 1)}, 4000); showSlides(slideIndex = n); } function showSlides(n){ var i; var slides = document.getElementsByClassName("mySlides"); var dots = document.getElementsByClassName("dot"); if (n > slides.length) {slideIndex = 1} if (n < 1) {slideIndex = slides.length} for (i = 0; i < slides.length; i++) { slides[i].style.display = "none"; } for (i = 0; i < dots.length; i++) { dots[i].className = dots[i].className.replace(" active", ""); } slides[slideIndex-1].style.display = "block"; dots[slideIndex-1].className += " active"; } pause = () => { clearInterval(myTimer); } resume = () =>{ clearInterval(myTimer); myTimer = setInterval(function(){plusSlides(slideIndex)}, 4000); }
/*Body*/ *{ box-sizing: border-box; } body{ margin: 0; padding: 0; font-size: 90%; font-family: 'Times New Roman', Times; width: 100%; background: rgb(241, 242, 255); } /*Navbar*/ .header{ margin-left: 0%; margin-right: 0%; } a img{ padding-left: 40%; } .menu-logo{ background: grey; position: fixed; width: 100%; height: 50px; box-shadow: 1px 1px 5px gray; } .logo{ display: flex; position: relative; flex-wrap: wrap; } .logo .brand-name{ padding-left: 40px; padding-top: 10px; font-family: Georgia, 'Times New Roman', Times, serif; } .logo .brand-name a{ color: rgb(0, 0, 255); text-decoration: none; } .logo .brand-name a:hover{ color: rgb(7, 7, 161); } .brand-name .brand-sm{ font-size: 20px; } .brand-name .brand-lg{ font-size: 28px; } /*Slideshow*/ .slideshow-container { max-width: 1000px; position: relative; margin: auto } .mySlides { display: none; height: 400px; border: solid 1px black; } .prev, .next { cursor: pointer; position: absolute; top: 50%; width: auto; margin-top: -22px; padding: 16px; color: #222428; font-weight: bold; font-size: 30px; transition: .6s ease; border-radius: 0 3px 3px 0 } .next { right: -50px; border-radius: 3px 3px 3px 3px } .prev { left: -50px; border-radius: 3px 3px 3px 3px } .prev:hover, .next:hover { color: #f2f2f2; background-color: rgba(0, 0, 0, 0.8) } .text { color: #f2f2f2; font-size: 15px; padding-top: 12px; padding-bottom: 12px; position: absolute; bottom: 0; width: 100%; text-align: center; background-color: #222428 } .numbertext { color: #f2f2f2; font-size: 12px; padding: 8px 12px; position: absolute; top: 0 } .dot { cursor: pointer; height: 15px; width: 15px; margin: 0 2px; background-color: #bbb; border-radius: 50%; display: inline-block; transition: background-color .6s ease } .active, .dot:hover { background-color: #717171 }
<!DOCTYPE html> <html> <head> <title>PeTech Gaming</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> </head> <!---------------------- ---------------------- Website body ---------------------- ---------------------> <body> <header class="header"> <div class="menu-logo"> <span class="logo"> <div class="brand-name"><a href="<?php echo URLROOT; ?>"><span class="brand-lg">PE</span><span class="brand-sm">-TECH Gaming</span></a></div> </span> </div> </header> <div class="content"> <!----------------------------------- ----------------------------------- Container for the slideshow gallery ----------------------------------- ----------------------------------> <div class="slideshow-container"> <div class="slideshow-inner"> <div class="mySlides fade"> <img src='https://www.google.com/imgres?imgurl=https%3A%2F%2Fimg-s-msn-com.akamaized.net%2Ftenant%2Famp%2Fentityid%2FAAG1858.img%3Fh%3D552%26w%3D750%26m%3D6%26q%3D60%26u%3Dt%26o%3Df%26l%3Df%26x%3D1085%26y%3D769&imgrefurl=https%3A%2F%2Fwww.msn.com%2Fen-xl%2Faustralasia%2Fphotos%2Foutstanding-pictures-to-celebrate-world-photography-day%2Fss-AAG1b0N&tbnid=ugOO8ZnjYk_OXM&vet=12ahUKEwjSwK7TkrjnAhXN44UKHePID0AQMygxegUIARCZAQ..i&docid=AwzQkxTwEeLXjM&w=750&h=500&q=pictures&client=opera&ved=2ahUKEwjSwK7TkrjnAhXN44UKHePID0AQMygxegUIARCZAQ' style='width: 100%; height: 390px;' alt="sally lightfoot crab"/> <div class="text">Sally Lightfoot Crab</div> </div> <div class="mySlides fade"> <img src='https://www.google.com/imgres?imgurl=https%3A%2F%2Fimages.unsplash.com%2Fphoto-1533177243638-dd485701f717%3Fixlib%3Drb-1.2.1%26ixid%3DeyJhcHBfaWQiOjEyMDd9%26w%3D1000%26q%3D80&imgrefurl=https%3A%2F%2Funsplash.com%2Fs%2Fphotos%2Fsnail&tbnid=nL3OIYJ9sL9hXM&vet=12ahUKEwjSwK7TkrjnAhXN44UKHePID0AQMygoegUIARCDAQ..i&docid=W9vqofOwf1Q8nM&w=1000&h=668&q=pictures&client=opera&ved=2ahUKEwjSwK7TkrjnAhXN44UKHePID0AQMygoegUIARCDAQ' style='width: 100%; height: 390px;' alt="fighting nazca boobies"/> <div class="text">A scuffle between two Nazca Boobies</div> </div> <div class="mySlides fade"> <img src='https://www.google.com/imgres?imgurl=https%3A%2F%2Fimages.pexels.com%2Fphotos%2F46710%2Fpexels-photo-46710.jpeg%3Fauto%3Dcompress%26cs%3Dtinysrgb%26dpr%3D1%26w%3D500&imgrefurl=https%3A%2F%2Fwww.pexels.com%2Fsearch%2Fsummer%2F&tbnid=bY1h5IUggH8INM&vet=12ahUKEwjSwK7TkrjnAhXN44UKHePID0AQMygkegQIARB6..i&docid=MLbH2w6jfwuHxM&w=500&h=333&q=pictures&client=opera&ved=2ahUKEwjSwK7TkrjnAhXN44UKHePID0AQMygkegQIARB6' style='width: 100%; height: 390px;' alt="otovalo waterfall"/> <div class="text">A waterfall discovered on a hike in Otovalo</div> </div> <div class="mySlides fade"> <img src='https://www.google.com/imgres?imgurl=https%3A%2F%2Fmedia.gettyimages.com%2Fphotos%2Fpacific-coast-highway-101-in-del-mar-picture-id905296508%3Fs%3D612x612&imgrefurl=https%3A%2F%2Fwww.gettyimages.com%2Fphotos%2Fpacific-ocean&tbnid=L0YRpKRU-4JgNM&vet=12ahUKEwjSwK7TkrjnAhXN44UKHePID0AQMyglegQIARB8..i&docid=BcppPlHbA1o_dM&w=612&h=408&q=pictures&client=opera&ved=2ahUKEwjSwK7TkrjnAhXN44UKHePID0AQMyglegQIARB8' style='width: 100%; height: 390px;' alt="pelican"/> <div class="text">Pelican</div> </div> </div> <a class="prev" onclick='plusSlides(-1)'>❮</a> <a class="next" onclick='plusSlides(1)'>❯</a> </div> <br/> <div style='text-align: center;'> <span class="dot" onclick='currentSlide(1)'></span> <span class="dot" onclick='currentSlide(2)'></span> <span class="dot" onclick='currentSlide(3)'></span> <span class="dot" onclick='currentSlide(4)'></span> </div> </div> </div> <br/> </div> </div> </div> <p>Some random text</p> <p>Some random text</p> <p>Some random text</p> <p>Some random text</p> <p>Some random text</p> <p>Some random text</p> <p>Some random text</p> <p>Some random text</p> <p>Some random text</p> <p>Some random text</p> <p>Some random text</p> <p>Some random text</p> <p>Some random text</p> <p>Some random text</p> <p>Some random text</p> <p>Some random text</p> <p>Some random text</p> <p>Some random text</p> <p>Some random text</p> <p>Some random text</p> <p>Some random text</p> <p>Some random text</p> <p>Some random text</p> <p>Some random text</p> <p>Some random text</p> <p>Some random text</p> <p>Some random text</p> <p>Some random text</p> <p>Some random text</p>
1 個解決方案
解決方案1
0 已采納 2020-02-04 15:21:50
要管理頁面元素的深度，您應該使用 z-index（默認為 0 par）。 因此，要將您的標題放在其他所有內容之上，請在 .menu-logo 上添加 z-index=1
如何用一張圖片制作幻燈片
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.