幻燈片/旋轉木馬和背景img

Question

我想添加一個幻燈片（https://www.w3schools.com/howto/howto_js_slideshow.asp）到導航和頁腳之間的第一頁和背景圖像頁腳和導航之間的下一頁。我該怎麼做？

示例： 第1頁：幻燈片， 第2頁：背景IMG， 第3頁：背景IMG（如第2頁）， 第4頁：背景IMG（如第2頁）

html { 
 
    height: 100%; 
 
    box-sizing: border-box; 
 
} 
 

 
body { 
 
    position: relative; 
 
    margin: 0; 
 
    background-image: url(https://previews.123rf.com/images/doimogoju/doimogoju1404/doimogoju140400084/27771522-Fussball-Fu-ballplatz-Stadion-Gras-Linie-Ball-Hintergrundtextur-Licht-Schatten-auf-dem-Rasen-Lizenzfreie-Bilder.jpg); 
 
    background-size: 100% 100%; 
 
    background-repeat: no-repeat; 
 
} 
 

 
ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    background-color: #333; 
 
} 
 

 
li { 
 
    float: left; 
 
} 
 

 
li a { 
 
    display: block; 
 
    color: #fff; 
 
    text-align: center; 
 
    padding: 14px 16px; 
 
    text-decoration: none; 
 
} 
 

 
li a:hover { 
 
    background-color: #0c0; 
 
} 
 

 
main { 
 
    padding: 30px; 
 
    margin: 0 auto; 
 
    margin-top: 50px; 
 
    margin-bottom: 50px; 
 
    width: 80%; 
 
    background-color: rgba(255, 255, 255, .75); 
 
    border: 1px solid rgba(51, 51, 51, .9); 
 
} 
 

 
footer { 
 
    overflow: hidden; 
 
    background-color: #333; 
 
    color: #fff; 
 
    padding: 20px; 
 
}

<header> 
 
    <ul> 
 
    <li><a class="active" href="#page1">Page 1</a></li> 
 
    <li><a href="#page2">Page 2</a></li> 
 
    <li><a href="#page3">Page 3</a></li> 
 
    <li><a href="#page4">Page 4</a></li> 
 
    </ul> 
 
</header> 
 

 
<main> 
 
    <h1>Title</h1> 
 
    <p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text TextText Text Text Text Text Text 
 
    Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text </p> 
 
</main> 
 

 
<footer> 
 
    Footer 
 
</footer>

Answer 1

嘗試爲carousel slider在first page

var slideIndex = 1; 
 
showSlides(slideIndex); 
 

 
function plusSlides(n) { 
 
    showSlides(slideIndex += n); 
 
} 
 

 
function currentSlide(n) { 
 
    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"; 
 
}

html { 
 
    height: 100%; 
 
    box-sizing: border-box; 
 
} 
 

 
body { 
 
    position: relative; 
 
    margin: 0; 
 
    background-image: url(https://previews.123rf.com/images/doimogoju/doimogoju1404/doimogoju140400084/27771522-Fussball-Fu-ballplatz-Stadion-Gras-Linie-Ball-Hintergrundtextur-Licht-Schatten-auf-dem-Rasen-Lizenzfreie-Bilder.jpg); 
 
    background-size: 100% 100%; 
 
    background-repeat: no-repeat; 
 
} 
 

 
ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    background-color: #333; 
 
} 
 

 
li { 
 
    float: left; 
 
} 
 

 
li a { 
 
    display: block; 
 
    color: #fff; 
 
    text-align: center; 
 
    padding: 14px 16px; 
 
    text-decoration: none; 
 
} 
 

 
li a:hover { 
 
    background-color: #0c0; 
 
} 
 

 
main { 
 
    padding: 30px; 
 
    margin: 0 auto; 
 
    margin-top: 50px; 
 
    margin-bottom: 50px; 
 
    width: 80%; 
 
    background-color: rgba(255, 255, 255, .75); 
 
    border: 1px solid rgba(51, 51, 51, .9); 
 
} 
 

 
footer { 
 
    overflow: hidden; 
 
    background-color: #333; 
 
    color: #fff; 
 
    padding: 20px; 
 
} 
 

 
* { 
 
    box-sizing: border-box 
 
} 
 

 

 
/* Slideshow container */ 
 

 
.slideshow-container { 
 
    max-width: 1000px; 
 
    position: relative; 
 
    margin: auto; 
 
} 
 

 
.mySlides { 
 
    display: none; 
 
} 
 

 

 
/* Next & previous buttons */ 
 

 
.prev, 
 
.next { 
 
    cursor: pointer; 
 
    position: absolute; 
 
    top: 50%; 
 
    width: auto; 
 
    margin-top: -22px; 
 
    padding: 16px; 
 
    color: white; 
 
    font-weight: bold; 
 
    font-size: 18px; 
 
    transition: 0.6s ease; 
 
    border-radius: 0 3px 3px 0; 
 
} 
 

 

 
/* Position the "next button" to the right */ 
 

 
.next { 
 
    right: 0; 
 
    border-radius: 3px 0 0 3px; 
 
} 
 

 

 
/* On hover, add a black background color with a little bit see-through */ 
 

 
.prev:hover, 
 
.next:hover { 
 
    background-color: rgba(0, 0, 0, 0.8); 
 
} 
 

 

 
/* Caption text */ 
 

 
.text { 
 
    color: #f2f2f2; 
 
    font-size: 15px; 
 
    padding: 8px 12px; 
 
    position: absolute; 
 
    bottom: 8px; 
 
    width: 100%; 
 
    text-align: center; 
 
} 
 

 

 
/* Number text (1/3 etc) */ 
 

 
.numbertext { 
 
    color: #f2f2f2; 
 
    font-size: 12px; 
 
    padding: 8px 12px; 
 
    position: absolute; 
 
    top: 0; 
 
} 
 

 

 
/* The dots/bullets/indicators */ 
 

 
.dot { 
 
    cursor: pointer; 
 
    height: 13px; 
 
    width: 13px; 
 
    margin: 0 2px; 
 
    background-color: #bbb; 
 
    border-radius: 50%; 
 
    display: inline-block; 
 
    transition: background-color 0.6s ease; 
 
} 
 

 
.active, 
 
.dot:hover { 
 
    background-color: #717171; 
 
} 
 

 

 
/* Fading animation */ 
 

 
.fade { 
 
    -webkit-animation-name: fade; 
 
    -webkit-animation-duration: 1.5s; 
 
    animation-name: fade; 
 
    animation-duration: 1.5s; 
 
} 
 

 
@-webkit-keyframes fade { 
 
    from { 
 
    opacity: .4 
 
    } 
 
    to { 
 
    opacity: 1 
 
    } 
 
} 
 

 
@keyframes fade { 
 
    from { 
 
    opacity: .4 
 
    } 
 
    to { 
 
    opacity: 1 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<header> 
 
    <ul> 
 
    <li><a class="active" href="#page1">Page 1</a></li> 
 
    <li><a href="#page2">Page 2</a></li> 
 
    <li><a href="#page3">Page 3</a></li> 
 
    <li><a href="#page4">Page 4</a></li> 
 
    </ul> 
 
</header> 
 

 

 
<main> 
 
    <h1>Title</h1> 
 
    <div class="slideshow-container"> 
 
    <div class="mySlides fade"> 
 
     <div class="numbertext">1/3</div> 
 
     <img src="https://previews.123rf.com/images/doimogoju/doimogoju1404/doimogoju140400084/27771522-Fussball-Fu-ballplatz-Stadion-Gras-Linie-Ball-Hintergrundtextur-Licht-Schatten-auf-dem-Rasen-Lizenzfreie-Bilder.jpg" style="width:100%"> 
 
     <div class="text">Caption Text</div> 
 
    </div> 
 

 
    <div class="mySlides fade"> 
 
     <div class="numbertext">2/3</div> 
 
     <img src="https://previews.123rf.com/images/doimogoju/doimogoju1404/doimogoju140400084/27771522-Fussball-Fu-ballplatz-Stadion-Gras-Linie-Ball-Hintergrundtextur-Licht-Schatten-auf-dem-Rasen-Lizenzfreie-Bilder.jpg" style="width:100%"> 
 
     <div class="text">Caption Two</div> 
 
    </div> 
 

 
    <div class="mySlides fade"> 
 
     <div class="numbertext">3/3</div> 
 
     <img src="https://previews.123rf.com/images/doimogoju/doimogoju1404/doimogoju140400084/27771522-Fussball-Fu-ballplatz-Stadion-Gras-Linie-Ball-Hintergrundtextur-Licht-Schatten-auf-dem-Rasen-Lizenzfreie-Bilder.jpg" style="width:100%"> 
 
     <div class="text">Caption Three</div> 
 
    </div> 
 

 
    <a class="prev" onclick="plusSlides(-1)">&#10094;</a> 
 
    <a class="next" onclick="plusSlides(1)">&#10095;</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> 
 
    </div> 
 
    <p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text TextText Text Text Text Text Text 
 
    Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text </p> 
 
</main> 
 

 
<footer> 
 
    Footer 
 
</footer>