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

时间：2017-07-20 13:20:54

标签： html css background carousel slideshow

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

实施例： 第1页：幻灯片， 第2页：背景img， 第3页：background img（如第2页）， 第4页：背景img（如第2页）

＆＃13;
＆＃13; 
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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 0 :(得分：0)

在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>

相关问题
最新问题