如何使用按钮创建自动幻灯片

Question

我的 HTML 中有一个自动幻灯片放映，它使用 JavaScript 在定义的时间后切换到下一张图片。这是我的代码：

<div class="slideshow-container">
<div class="mySlides fade">
  <img alt="Gaming Computer" src="../Pictures/1.jpg" href="../Pages/Systems.html" style="width:100%">
  <div> <h2 class="photoText"><span>Gaming Ready Computers.</span></h2> </div>
</div>

<div class="mySlides fade">
  <img alt="Text" src="../Pictures/2.jpeg" style="width:100%">
  <h2 class="photoText2"><span>The newest, most innovative, and truly powerful GPUs, <br/> &nbsp ready to push your next PC to the next level.</span></h2>
  </div>

<div class="mySlides fade">
  <img alt="Text" src="../Pictures/3.png" style="width:100%">
  <h2 class="photoText3"><span>The Ultimate Gaming Experience.</span></h2>
</div>

<div class="mySlides fade">
  <img alt="Text" src="../Pictures/4.png" style="width:100%">
  <h2 class="photoText4"><span>Industry Quality Editing.</span></h2>
</div>

<div class="mySlides fade">
  <img alt="Text" src="../Pictures/5.jpg" style="width:100%">
  <h2 class="photoText5"><span>Learn to create anything you can imagine.</span></h2>
</div>

<div class="dotContainer" style="text-align:center;">
  <span class="dot"></span> 
  <span class="dot"></span> 
  <span class="dot"></span> 
  <span class="dot"></span>
  <span class="dot"></span> 
</div>

<script>
var slideIndex = 0;
showSlides();

function showSlides() {
    var i;
    var slides = document.getElementsByClassName("mySlides");
    var dots = document.getElementsByClassName("dot");
    for (i = 0; i < slides.length; i++) {
       slides[i].style.display = "none";  
    }
    slideIndex++;
    if (slideIndex> slides.length) {slideIndex = 1}    
    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";
    setTimeout(showSlides, 6000);
}
</script>

我想在图像的右侧和左侧添加两个按钮，单击它们可以切换到下一张或上一张图片。我一直在寻找几天，但没有找到任何可以解决我问题的方法。我在这里看到另一个 post 有人问了和我一样的问题，但是唯一的答案是使用来自一个太长的网站的 CSS 来过滤掉代码幻灯片。

我是 JavaScript 的新手，所以我不太了解它，所以非常感谢您的帮助！

Answer 1

我想你是这样期待的。

<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
                                                <i class="fa fa-chevron-left" aria-hidden="true"></i>
                                            </a>
                                            <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
                                                <i class="fa fa-chevron-right" aria-hidden="true"></i>
                                            </a>

检查你的图片

https://jsfiddle.net/sg649vy3/

已更新 fiddle https://jsfiddle.net/sg649vy3/4/

如果你想要那些中间的箭头，添加这个样式

.fa-chevron-left,.fa-chevron-right{
  margin-top:180%;
}

如何使用按钮创建自动幻灯片

How to create an automatic slideshow with buttons

html

javascript

css

slideshow