html - 幻灯片/旋转木马和背景 img

Question

我想将幻灯片 ( https://www.w3schools.com/howto/howto_js_slideshow.asp ) 添加到导航和页脚之间的第一页，并将背景图像添加到页脚和导航之间的下一页。我该怎么做？

例子:第 1 页:幻灯片，第 2 页:背景图片，第 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

尝试在第一页中的轮播 slider

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>