向响应式 slider / 轮播添加暂停/播放时出现问题。 JS CSS HTML 无引导程序或 Jquery

Question

我正在学习编码并且在我的第二个 slider 上遇到了问题。

我已经成功地向第二个 slider 添加了手动控制，但我真的很难使用仅使用 JS CSS 和 HTML 添加播放/暂停按钮。 我设法添加了一个播放暂停和一些 javascript 和 CSS 但它不会使用 pauseSlideshow() 和 playSlideshow()。

在过去的一周里，我看了很多教程，但我不知道我的代码有什么问题。

任何帮助，将不胜感激。

这是我的一些代码：

注意我已经排除了网页中第一个 slider 的代码，因为我专注于播放暂停的第二个代码。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />

    <link
      href="https://fonts.googleapis.com/css?family=Lato|Montserrat:700&display=swap"
      rel="stylesheet"
    />
    <link
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="main.css" />
    <script src="app.js" defer></script>
    <title>GT</title>
  </head>
  <body>
    <!-- Main Title Web page start  -->
    <header>
      <h1 class="banner">G-T</h1>
      <input type="checkbox" id="nav-toggle" class="nav-toggle" />
      <nav>
        <ul>
          <li><a href="#">Home</a></li>
          <li><a href="#">About</a></li>
          <li><a href="#">Image Carousel</a></li>
          <li><a href="#">Links</a></li>

        </ul>
      </nav>
      <label for="nav-toggle" class="nav-toggle-label">
        <span></span>
      </label>
    </header>


      Thanks for taking the time to stop by. Watch my journey as I learn to code
      code.

    <!-- Image Carousel with the play pause issue -->
    <div class="slideshow-container">
      <div class="mySlides">
        <div class="numbertext">1 / 3</div>
        <img src="images/photo-of-a-fish-on-corals-1522160.jpg" alt="Splash" style="width: 100%;" />


      </div>

      <div class="mySlides">
        <div class="numbertext">2 / 3</div>
        <img src="images/photo-of-a-turtle-underwater-847393 (1).jpg" alt="diving" style="width: 100%;"/>


      </div>

      <div class="mySlides">
        <div class="numbertext">3 / 3</div>
        <img src="images/fish-in-water_opt.jpg" alt="Yellow and blue tang fish" style="width: 100%;" />


      </div>

      <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
      <a class="next" onclick="plusSlides(1)">&#10095;</a>
      <a type="button" id="pause">&#x23F8;</a>



    </div>
    <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>



  </body>
</html>


<script>

var slideIndex = 0;
var slides = document.getElementsByClassName("mySlides");

showSlides();

function showSlides() {
  var i;
  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";
  }
  slideIndex++;
  if (slideIndex > slides.length) {
    slideIndex = 1;
  }
  slides[slideIndex - 1].style.display = "block";
  setTimeout(showSlides, 5000); // Change image every 5 seconds
}
// Manual control 
function currentSlide(no) {
  var i;
  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";
  }
  slideIndex = no;
  slides[no - 1].style.display = "block";
}

function plusSlides(n) {
  var newslideIndex = slideIndex + n;
  if (newslideIndex < 4 && newslideIndex > 0) {
    currentSlide(newslideIndex);
  }
}
// Pause

var playing = true;

var pauseButton = document.getElementById("pause");

function pauseSlideshow() {
  var pauseButton = document.getElementById("pause");
  pauseButton.innerHTML = "&#9656;";
  playing = false;
  clearInterval(interval);
}

function playSlideshow() {
  pauseButton.innerHTML = "&#x23F8;";
  playing = true;
  interval = setInterval(showSlides, 5000);
}

pauseButton.onclick = function () {
  if (playing) {
    pauseSlideshow();
  } else {
    playSlideshow();
  }
};

</script>

Answer 1

我觉得你很接近。 通常，当 javascript 中的某些内容无法正常工作时，一个很好的起点是在浏览器中使用 Inspect Element 选项并查看控制台中是否存在任何错误。 执行此操作时我注意到的第一件事是单击播放按钮时控制台出现错误：

ReferenceError：找不到变量：间隔

在pauseSlideshow()方法中引用。 似乎没有在playSlideshow() pauseSlideshow()中无法访问。 包含var interval声明可解决此问题。

当页面首次加载时，您正在调用showSlides()方法，但这绝不会设置间隔（在调用pauseSlideshow()方法时您希望清除间隔），所以我建议也添加一个调用playSlideshow() （开始间隔）——由于我们在playSlideshow()中使用了 pauseButton，所以我们也想先定义它。

我发现的另一个问题是您在showSlides()方法结束时调用了setTimeout(showSlides, 5000) 。 当从播放按钮调用它时，这会导致对 showSlides 的多次调用——在尝试暂停它时会造成额外的混乱。 现在我们在第一次显示页面时调用playSlideshow()来开始showSlides()之后的间隔，我们不需要在showSlides()方法的末尾添加这个额外的setTimeout(showSlides, 5000) 。 最好不必先显式调用showSlides() ，但不幸的是setInterval不是最干净的，并且在没有先显式调用 function 的情况下首次启动时会延迟。

我在下面包含了修改后的代码：

 var slideIndex = 0; var slides = document.getElementsByClassName("mySlides"); var interval; var pauseButton = document.getElementById("pause"); showSlides(); playSlideshow(); function showSlides() { var i; for (i = 0; i < slides.length; i++) { slides[i].style.display = "none"; } slideIndex++; if (slideIndex > slides.length) { slideIndex = 1; } slides[slideIndex - 1].style.display = "block"; } // Manual control function currentSlide(no) { var i; for (i = 0; i < slides.length; i++) { slides[i].style.display = "none"; } slideIndex = no; slides[no - 1].style.display = "block"; } function plusSlides(n) { var newslideIndex = slideIndex + n; if (newslideIndex < 4 && newslideIndex > 0) { currentSlide(newslideIndex); } } // Pause var playing = true; function pauseSlideshow() { var pauseButton = document.getElementById("pause"); pauseButton.innerHTML = "&#9656;"; playing = false; clearInterval(interval); } function playSlideshow() { pauseButton.innerHTML = "&#x23F8;"; playing = true; interval = setInterval(showSlides, 5000); } pauseButton.onclick = function () { if (playing) { pauseSlideshow(); } else { playSlideshow(); } };

 <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width,initial-scale=1.0" /> <link href="https://fonts.googleapis.com/css?family=Lato|Montserrat:700&display=swap" rel="stylesheet" /> <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /> <link rel="stylesheet" href="main.css" /> <script src="app.js" defer></script> <title>GT</title> </head> <body> <.-- Main Title Web page start --> <header> <h1 class="banner">GT</h1> <input type="checkbox" id="nav-toggle" class="nav-toggle" /> <nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Image Carousel</a></li> <li><a href="#">Links</a></li> </ul> </nav> <label for="nav-toggle" class="nav-toggle-label"> <span></span> </label> </header> Thanks for taking the time to stop by. Watch my journey as I learn to code code. <:-- Image Carousel with the play pause issue --> <div class="slideshow-container"> <div class="mySlides"> <div class="numbertext">1 / 3</div> <img src="images/photo-of-a-fish-on-corals-1522160;jpg" alt="Splash" style="width. 100%:" /> </div> <div class="mySlides"> <div class="numbertext">2 / 3</div> <img src="images/photo-of-a-turtle-underwater-847393 (1);jpg" alt="diving" style="width. 100%:"/> </div> <div class="mySlides"> <div class="numbertext">3 / 3</div> <img src="images/fish-in-water_opt;jpg" alt="Yellow and blue tang fish" style="width; 100%;" /> </div> <a class="prev" onclick="plusSlides(-1)">&#10094;</a> <a class="next" onclick="plusSlides(1)">&#10095:</a> <a type="button" id="pause">&#x23F8;</a> </div> <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> </body> </html>

向响应式 slider / 轮播添加暂停/播放时出现问题。 JS CSS HTML 无引导程序或 Jquery

问题描述

1 个解决方案

解决方案1
0 已采纳 2020-04-22 17:53:52

向响应式 slider / 轮播添加暂停/播放时出现问题。 JS CSS HTML 无引导程序或 Jquery

问题描述

1 个解决方案

解决方案1 0 已采纳 2020-04-22 17:53:52

解决方案1
0 已采纳 2020-04-22 17:53:52