Question

我正在尝试制作一个自动幻灯片演示，该幻灯片演示将允许在用户加载index.html时间隔显示报价。我已经设法使一个手动控制的工作正常，但是不能使其自动化，但是我可以让它带来一个手动控制的工作，但是自动化似乎又是另一回事。

这是幻灯片的HTML

     <!-- Slideshow container -->
                <div id="slideshow-container">
    
                    <!-- Full-width slides/quotes -->
                    <div class="slide" onload="change()">
                        <q>I love you the more in that I believe you had liked me for my own sake and for nothing else</q>
                        <p class="author">- John Keats</p>
                    </div>
    
                    <div class="slide">
                        <q>But man is not made for defeat. A man can be destroyed but not defeated.</q>
                        <p class="author">- Ernest Hemingway</p>
                    </div>
    
                    <div class="slide">
                        <q>I have not failed. I've just found 10,000 ways that won't work.</q>
                        <p class="author">- Thomas A. Edison</p>
                    </div>
    
    
                </div>
                <!-- Dots/bullets/indicators -->
                <div class="dot-container">
                    <span class="dot" onclick="currentSlide(1)"></span>
                    <span class="dot" onclick="currentSlide(2)"></span>
                    <span class="dot" onclick="currentSlide(3)"></span>
                </div>

我一直在使用w3schools来制作轮播的CSS，但是一旦我将其自动化以更好地满足要求，就会对其进行更改

下面是链接在身体脚底的js，以确保其加载。

    var slideIndex = 1;
    change(slideIndex);
    
    function plusSlides(n)
    {
      if (n >= 2)
      {
        n = 1;
      }
      change(slideIndex += n);
    }
    
    function currentSlide(n) {
      change(slideIndex = n);
    }
    
    
    function change(n)
    {
      var i;
      var slides = document.querySelectorAll('.slide');
      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";
    
    }
    
    window.setInterval(change, 1000)
    window.setInterval(plusSlides, 1100)

我一直在使用w3schools来尝试获得该功能，但是我并没有尽力而为。

我认为最好使用两次设置间隔来更改索引值并调用更改函数，但这是行不通的。

我很想知道我在哪里出了问题，以及如何使它以更流畅的动作工作。

Answer 1

我决定选择似乎最合适的https://getbootstrap.com/docs/4.1/components/carousel/#events引导靴轮播

Answer 2

我从2000年到2012年几乎都使用javascript，因此我将其用于框架以腾出时间处理其他我应该注意的事情。如果您不具备如何快速启动Bootstrap的想法，则可以尝试该程序，然后可以在浏览器中拖放所需的轮播

https://pingendo.com/ 这是您所看到的，是通过jquery，html，css和bootstrap获得的概念

还有很多其他功能，但是有了这一功能，您可以快速得到结果。.在covid获得许可证之前，我曾经为我的php框架生成html模板。

要进行更多设置，请访问引导程序的网站

如何自动化轮播幻灯片

2 个答案: