自动幻灯片显示上一个和下一个指标

时间：2017-04-24 17:47:58

标签： javascript html css slideshow

我正在尝试创建一个可以自动从一张图片转换到另一张图片的旁观者，但也可以让用户使用上一个和下一个指示符手动更改幻灯片。

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

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

这是我的代码：

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

2 个答案:

答案 0 :(得分：2)

我明白了：

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

然而，似乎存在一些问题。我无法弄清楚为什么圆形按钮是透明的。

答案 1 :(得分：1)

是的，太糟糕了，他们没有使样品兼容。为了使其与您拥有的原始代码保持接近，只需使用一个时间间隔来调用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
相关问题
最新问题