带有上一个和下一个指示器的自动幻灯片

Question

我正在尝试创建一个会自动从一张图片转换到下一张图片的边展示，但也能够让用户使用上一个和下一个指示器手动更改幻灯片。

我正在使用此链接中的教程： https://www.w3schools.com/howto/howto_js_slideshow.asp

但他们没有将两者合并在一起，我找不到任何方法让它工作。

这是我的代码：

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", "");
    }
    if (slideIndex> slides.length) {slideIndex = 1}
    slides[slideIndex-1].style.display = "block";
    dots[slideIndex-1].className += " active";
  }

/* Slideshow container */
.slideshow-container {
  display:                 flex;
  display:                 -webkit-flex; /* Safari 8 */
  flex-wrap:               wrap;
  -webkit-flex-wrap:       wrap;         /* Safari 8 */
  justify-content:         center;
  -webkit-justify-content: center;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 4%;
  width: auto;
  position: relative;
  cursor: pointer;
  box-sizing: border-box;
}

.slideshow-container img {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  border-radius: 3px;
}

@media screen and (max-width: 1000px) {
  .slideshow-container {
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
  }
}

.mySlides {
   display: none;
}

/* Next & previous buttons */
.prev, .next {
 cursor: pointer;
 position: absolute;
 top: 45%;
 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;
}

.prev {
 left: 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: 50px;
 width: 100%;
 text-align: center;
}

/* The dots/bullets/indicators */
.dot {
 cursor: pointer;
 height: 13px;
 width: 13px;
 bottom: 50px;
 margin: 0 2px;
 position: relative;
 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: 4s;
 animation-name: fade;
 animation-duration: 4s;
}

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

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

<div class="slideshow-container">
  <div class="mySlides fade"><a href="#"><img src="https://appraw.com/static/previews/downloads/d/z/k/p-desert-zK6WoOEYks-1.jpg" style="width:100%"></a></div>
  <div class="mySlides fade"><a href="#"><img src="http://www.firstnaturetours.com/images/content/oregon-coast-2000x800.jpg" style="width:100%"></a></div>
  <div class="mySlides fade"><a href="#"><img src="http://hdwallpapersbuzz.com/wp-content/uploads/2016/11/Sunrise-Beach-Koh-Lipe-Thailand-HD-Photo-17.jpg" style="width:100%"></a></div>
  <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
  <a class="next" onclick="plusSlides(1)">&#10095;</a>
    <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>
</div>

Answer 1

我知道了：

// Start of auto Slideshow


var myIndex = 0;
carousel();

function carousel() {
    var i;
    var x = document.getElementsByClassName( "mySlides ");
    for (i = 0; i < x.length; i++) {
       x[i].style.display =  "none ";  
    }
    myIndex++;
    if (myIndex > x.length) {myIndex = 1}    
    x[myIndex-1].style.display =  "block ";  
    setTimeout(carousel, 2000); // Change image every 2 seconds
}


// End of auto Slideshow





var slideIndex = 1;
showDivs(slideIndex);

function plusDivs(n) {
  showDivs(slideIndex += n);
}

function currentDiv(n) {
  showDivs(slideIndex = n);
}

function showDivs(n) {
  var i;
  var x = document.getElementsByClassName( "mySlides ");
  var dots = document.getElementsByClassName( "demo ");
  if (n > x.length) {slideIndex = 1}    
  if (n < 1) {slideIndex = x.length}
  for (i = 0; i < x.length; i++) {
     x[i].style.display =  "none ";  
  }
  for (i = 0; i < dots.length; i++) {
     dots[i].className = dots[i].className.replace( " w3-red ",  " ");
  }
  x[slideIndex-1].style.display =  "block ";  
  dots[slideIndex-1].className +=  " w3-red ";
}




var slideIndex = 1;
showDivs(slideIndex);

function plusDivs(n) {
  showDivs(slideIndex += n);
}

function currentDiv(n) {
  showDivs(slideIndex = n);
}

function showDivs(n) {
  var i;
  var x = document.getElementsByClassName( "mySlides ");
  var dots = document.getElementsByClassName( "demo ");
  if (n > x.length) {slideIndex = 1}    
  if (n < 1) {slideIndex = x.length}
  for (i = 0; i < x.length; i++) {
     x[i].style.display =  "none ";  
  }
  for (i = 0; i < dots.length; i++) {
     dots[i].className = dots[i].className.replace( " w3-red ",  " ");
  }
  x[slideIndex-1].style.display =  "block ";  
  dots[slideIndex-1].className +=  " w3-red ";
}

body {
background-color: black;
color: red;
}



.mySlides {display:none}
.w3-left, .w3-right, .w3-badge {cursor:pointer}
.w3-badge {height:13px;width:13px;padding:0}
.w3-content w3-display-container { border: 2px solid red; }

    <div class= "w3-content w3-display-container " style= "max-width:800px ">

<img class= "mySlides " src= "https://appraw.com/static/previews/downloads/d/z/k/p-desert-zK6WoOEYks-1.jpg" style= "width:100% ">
<img class= "mySlides " src= "http://www.firstnaturetours.com/images/content/oregon-coast-2000x800.jpg" style= "width:100% ">
<img class= "mySlides " src= "http://hdwallpapersbuzz.com/wp-content/uploads/2016/11/Sunrise-Beach-Koh-Lipe-Thailand-HD-Photo-17.jpg" style= "width:100% ">


    <div class= "w3-center ">
      <div class= "w3-section ">
        <div class= "w3-left w3-padding-left w3-hover-text-khaki " onclick= "plusDivs(-1) ">&#10094;</div>
        <div class= "w3-right w3-padding-right w3-hover-text-khaki " onclick= "plusDivs(1) ">&#10095;</div>
      </div>
        <span class= "w3-badge demo w3-border w3-transparent w3-hover-red " onclick= "currentDiv(1) "></span>
        <span class= "w3-badge demo w3-border w3-transparent w3-hover-red " onclick= "currentDiv(2) "></span>
        <span class= "w3-badge demo w3-border w3-transparent w3-hover-red " onclick= "currentDiv(3) "></span>

      </div>

    </div>

但是，似乎存在一些问题。我不明白为什么圆形按钮是透明的。

Answer 2

是的，太糟糕了，他们没有使样品兼容。为了使其接近您拥有的原始代码，只需使用间隔调用plusSlides(1)：

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", "");
    }
    if (slideIndex> slides.length) {slideIndex = 1}
    slides[slideIndex-1].style.display = "block";
    dots[slideIndex-1].className += " active";
 }
 setInterval(plusSlides, 2000, 1); // call plusSlider, with 1 as parameter