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

Question

I'm learning to code and have hit a problem on my second slider.我正在学习编码并且在我的第二个 slider 上遇到了问题。

I've aded manual controls to the the second slider with success but I'm really having trouble adding a play/pause button using only JS CSS and HTML.我已经成功地向第二个 slider 添加了手动控制，但我真的很难使用仅使用 JS CSS 和 HTML 添加播放/暂停按钮。 I've managed to add a play pause and some javascript and CSS but it will not wok using pauseSlideshow() and playSlideshow().我设法添加了一个播放暂停和一些 javascript 和 CSS 但它不会使用 pauseSlideshow() 和 playSlideshow()。

I've watched many tutorials over the past week and I can't figure out what my code isn't working.在过去的一周里，我看了很多教程，但我不知道我的代码有什么问题。

Any help would be appreciated.任何帮助，将不胜感激。

Here is some of my code:这是我的一些代码：

NB I have excluded the code for the first slider in the webpage as I'm focusing on the second one for the play pause.注意我已经排除了网页中第一个 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

I think you're pretty close.我觉得你很接近。 Typically a good place to start when something is not working in javascript is using the Inspect Element option within your browser and taking a look if there are any errors within the console.通常，当 javascript 中的某些内容无法正常工作时，一个很好的起点是在浏览器中使用 Inspect Element 选项并查看控制台中是否存在任何错误。 The first thing I noticed when doing this is that there was an error in the console when clicking the play button:执行此操作时我注意到的第一件事是单击播放按钮时控制台出现错误：

ReferenceError: Can't find variable: interval ReferenceError：找不到变量：间隔

Referenced within the pauseSlideshow() method.在pauseSlideshow()方法中引用。 It doesn't appear that interval is declared outside of the playSlideshow() method so it's inaccessible within the pauseSlideshow() method.似乎没有在playSlideshow() pauseSlideshow()中无法访问。 Including the var interval declaration resolves this issue.包含var interval声明可解决此问题。

When the page first loads you're calling the showSlides() method, but this is never setting the interval (which you are desiring to clear when calling the pauseSlideshow() method), so I would recommend adding a call playSlideshow() as well (to start the interval) -- as a result of the we're using the pauseButton within playSlideshow() so we'll want to define that first as well.当页面首次加载时，您正在调用showSlides()方法，但这绝不会设置间隔（在调用pauseSlideshow()方法时您希望清除间隔），所以我建议也添加一个调用playSlideshow() （开始间隔）——由于我们在playSlideshow()中使用了 pauseButton，所以我们也想先定义它。

The other issue I located is that you're recalling setTimeout(showSlides, 5000) at the end of your showSlides() method.我发现的另一个问题是您在showSlides()方法结束时调用了setTimeout(showSlides, 5000) 。 This causes multiple calls to showSlides when it's invoked from the play button -- causing additional confusion when trying to pause it.当从播放按钮调用它时，这会导致对 showSlides 的多次调用——在尝试暂停它时会造成额外的混乱。 Now that we're calling playSlideshow() to start the interval after showSlides() when the page first displays, we don't need this additional setTimeout(showSlides, 5000) at the end of the showSlides() method.现在我们在第一次显示页面时调用playSlideshow()来开始showSlides()之后的间隔，我们不需要在showSlides()方法的末尾添加这个额外的setTimeout(showSlides, 5000) 。 It would be ideal to not have to explicitly call showSlides() first, but unfortunately setInterval isn't the cleanest and delays when first starting without an explicit function call first.最好不必先显式调用showSlides() ，但不幸的是setInterval不是最干净的，并且在没有先显式调用 function 的情况下首次启动时会延迟。

I've included the modified code below:我在下面包含了修改后的代码：

 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