向響應式 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