我的自動jquery滑塊的播放/暫停按鈕

Question

所以我有一個自動的jquery滑塊，我想通過一個播放/暫停按鈕來控制它。 當前，滑塊在頁面加載時啟動，但是我希望能夠通過播放按鈕class = heart來啟動/暫停它。

我希望帶有播放類的圖像成為播放/暫停按鈕。

我目前不知道如何執行此操作，這是我的代碼：

 var slideIndex = 0; showSlides(); function showSlides() { var i; var slides = document.getElementsByClassName("mySlides1"); 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, 7000); // Change image every 2 seconds } 

 .polaroid1{ box-shadow: 10px 10px 7px -7px rgba(0, 0, 0, 0.5); -webkit-backface-visibility: hidden; transform: rotate(-8deg); margin-bottom:30px; width:380px; height:320px; background-color:rgba(255, 255, 255, 1.0); text-align:right; padding-top:10px; padding-right:10px; padding-left:10px; padding-bottom:15px; top:15px; left:25px; position:relative; } .photo1{ width:100%; height:85%; position:relative; padding:5px; } .date1{ margin:0; padding-right:10px; font-family: 'Covered By Your Grace', cursive; transform: rotate(-5deg); font-size:28px; } .mySlides1{ display:none; width:380px; height:320px; position:absolute; top:0px; left:0px; } .play{ position:absolute; left:5px; bottom:5px; cursor:pointer; z-index:10000; } 

 <div class="polaroid1"> <img class="play" src="images/heart.png"> <div class="mySlides1 fade"> <img class="photo1" src="images/IMG-20170610-WA0028.jpg"> <h3 class="date1">22-05-2017</h3> </div> <div class="mySlides1 fade"> <img class="photo1" src="images/20170812_181516.jpg"> <h3 class="date1">12-08-2017</h3> </div> <div class="mySlides1 fade"> <img class="photo1" src="images/20170522_112958.jpg"> <h3 class="date1">22-05-2017</h3> </div> </div> 

Answer 1

我編輯了您的示例。 調用startSlides（）啟動滑塊，並調用stopSlides（）停止滑塊。 主要思想是清除停止時的超時並在啟動時再次設置。

 var slideIndex = 0; var stop = false; var sliderTimeout; showSlides(); function click() { if (stop) { startSlides(); } else { stopSlides(); } } function stopSlides() { clearTimeout(sliderTimeout); stop = true; } function startSlides() { stop = false; showSlides(); } function showSlides() { var i; var slides = document.getElementsByClassName("mySlides1"); 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"; if (!stop) { sliderTimeout = setTimeout(showSlides, 7000); // Change image every 2 seconds } } 

 .polaroid1{ box-shadow: 10px 10px 7px -7px rgba(0, 0, 0, 0.5); -webkit-backface-visibility: hidden; transform: rotate(-8deg); margin-bottom:30px; width:380px; height:320px; background-color:rgba(255, 255, 255, 1.0); text-align:right; padding-top:10px; padding-right:10px; padding-left:10px; padding-bottom:15px; top:15px; left:25px; position:relative; } .photo1{ width:100%; height:85%; position:relative; padding:5px; } .date1{ margin:0; padding-right:10px; font-family: 'Covered By Your Grace', cursive; transform: rotate(-5deg); font-size:28px; } .mySlides1{ display:none; width:380px; height:320px; position:absolute; top:0px; left:0px; } .play{ position:absolute; left:5px; bottom:5px; cursor:pointer; z-index:10000; } 

 <div class="polaroid1"> <img class="play" src="images/heart.png"> <div class="mySlides1 fade"> <img class="photo1" src="images/IMG-20170610-WA0028.jpg"> <h3 class="date1">22-05-2017</h3> </div> <div class="mySlides1 fade"> <img class="photo1" src="images/20170812_181516.jpg"> <h3 class="date1">12-08-2017</h3> </div> <div class="mySlides1 fade"> <img class="photo1" src="images/20170522_112958.jpg"> <h3 class="date1">22-05-2017</h3> </div> </div>