如何使用按钮和 transition/crossfade 制作自动幻灯片？

Question

我想制作一个幻灯片，就像在 https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_slideshow_dots2 上看到的示例一样（减去侧箭头）。我找不到在底部保留选择按钮的同时创建自动交叉淡入淡出过渡的方法。

这是给出的代码：

<!DOCTYPE html>
<html>
 <title>W3.CSS</title>
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="/lib/w3.css">
 <style>
  .mySlides {display:none}
  .w3-left, .w3-right, .w3-badge {cursor:pointer}
  .w3-badge {height:13px;width:13px;padding:0}
 </style>
 <body>
  <div class="w3-container">
   <h2>Slideshow Indicators</h2>
   <p>An example of using buttons to indicate how many slides there are in the slideshow, and which slide the user is currently viewing.</p>
  </div>
  <div class="w3-content w3-display-container" style="max-width:800px">
   <img class="mySlides" src="img_nature_wide.jpg" style="width:100%">
   <img class="mySlides" src="img_fjords_wide.jpg" style="width:100%">
   <img class="mySlides" src="img_mountains_wide.jpg" style="width:100%">
   <div class="w3-center w3-section w3-large w3-text-white w3-display-bottommiddle" style="width:100%">
    <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>
    <span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(1)"></span>
    <span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(2)"></span>
    <span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(3)"></span>
   </div>
  </div>

  <script>
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-white", "");
 }
 x[slideIndex-1].style.display = "block";  
  dots[slideIndex-1].className += " w3-white";
 }
  </script>

 </body>
</html>

更新：

<style>
.w3-left, .w3-right, .w3-badge {cursor:pointer}
.w3-badge {height:13px;width:13px;padding:0}
.mySlides {
    border: none; 
    opacity: 0; 
    position: absolute; 
    -webkit-transition: opacity 2s linear;
    -moz-transition: opacity 2s linear;
    -o-transition: opacity 2s linear;
    transition: opacity 2s linear;
}
.showMe {opacity: 1;}
</style>
<div class="w3-content w3-display-container" style="max-width:800px">
  <img id="slideimg0" class="mySlides showMe" src="img_nature_wide.jpg" style="width:100%">
  <img id="slideimg1" class="mySlides" src="img_fjords_wide.jpg" style="width:100%">
  <img id="slideimg2" class="mySlides" src="img_mountains_wide.jpg" style="width:100%">
  <div class="w3-center w3-section w3-large w3-text-white w3-display-bottommiddle" style="width:100%">
    <span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(1)"></span>
    <span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(2)"></span>
    <span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(3)"></span>
  </div>
</div>

<script>
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 < dots.length; i++) {
     dots[i].className = dots[i].className.replace(" w3-white", "");
  }
  x[slideIndex-1].style.display = "block";  
  dots[slideIndex-1].className += " w3-white";
}

var timer = setInterval(nextImage, 4000);
var curImage = 0;
var numImages = 3;

function nextImage() {
    var e;
    e = document.getElementById("slideimg" + curImage);
    removeClass(e, "showMe");

    curImage++;
    if (curImage > numImages - 1) {
        curImage = 0;
    }

    e = document.getElementById("slideimg" + curImage);
    addClass(e, "showMe");
}

function addClass(elem, name) {
    var c = elem.className;
    if (c) c += " "; 
    c += name;
    elem.className = c;
}

function removeClass(elem, name) {
    var c = elem.className;
    elem.className = c.replace(name, "").replace(/\s+/g, " ").replace(/^\s+|\s+$/g, "");
}
</script>

问题是我无法让按钮正常工作

Answer 1

var slideIndex = 1;
carousel();

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

又把你html改成div，把<和>改成

 <div class="w3-center w3-section w3-large w3-text-white w3-display-bottommiddle" style="width:100%">
    <span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(1)"></span>
    <span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(2)"></span>
    <span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(3)"></span>
  </div>

您可以查看 this 了解更多信息！

希望对您有所帮助！

Answer 2

使用Bootstrap也许你可以轻松解决。使用适当的 脚本和样式表 尝试此代码添加......

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div id="myCarousel" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
    <li data-target="#myCarousel" data-slide-to="1"></li>
    <li data-target="#myCarousel" data-slide-to="2"></li>
    <li data-target="#myCarousel" data-slide-to="3"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="https://unsplash.it/1200/380/?random" alt="Chania">
    </div>

    <div class="item">
     <img src="https://unsplash.it/1200/380/?random" alt="Chania">
    </div>

    <div class="item">
      <img src="https://unsplash.it/1200/380/?random" alt="Chania">
    </div>

    <div class="item">
      <img src="https://unsplash.it/1200/380/?random" alt="Chania">
    </div>
  </div>

  <!-- Left and right controls -->
  <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

Answer 3

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div id="myCarousel" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
    <li data-target="#myCarousel" data-slide-to="1"></li>
    <li data-target="#myCarousel" data-slide-to="2"></li>
    <li data-target="#myCarousel" data-slide-to="3"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="https://unsplash.it/1200/380/?random" alt="Chania">
    </div>

    <div class="item">
     <img src="https://unsplash.it/1200/380/?random" alt="Chania">
    </div>

    <div class="item">
      <img src="https://unsplash.it/1200/380/?random" alt="Chania">
    </div>

    <div class="item">
      <img src="https://unsplash.it/1200/380/?random" alt="Chania">
    </div>
  </div>

  <!-- Left and right controls -->
  <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

如何使用按钮和 transition/crossfade 制作自动幻灯片？

How can I make an automatic slideshow with both buttons and transition/crossfade?

html

javascript

css

slideshow