自動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{ 
 
\t box-shadow: 10px 10px 7px -7px rgba(0, 0, 0, 0.5); 
 
\t -webkit-backface-visibility: hidden; 
 
\t transform: rotate(-8deg); 
 
\t margin-bottom:30px; 
 
\t width:380px; 
 
\t height:320px; 
 
\t background-color:rgba(255, 255, 255, 1.0); 
 
\t text-align:right; 
 
\t padding-top:10px; 
 
\t padding-right:10px; 
 
\t padding-left:10px; 
 
\t padding-bottom:15px; 
 
\t top:15px; 
 
\t left:25px; 
 
\t position:relative; 
 
} 
 

 
.photo1{ 
 
\t width:100%; 
 
\t height:85%; 
 
\t position:relative; 
 
\t padding:5px; 
 
} 
 

 
.date1{ 
 
\t margin:0; 
 
\t padding-right:10px; 
 
\t font-family: 'Covered By Your Grace', cursive; 
 
\t transform: rotate(-5deg); 
 
\t font-size:28px; 
 
} 
 

 
.mySlides1{ 
 
\t display:none; 
 
\t width:380px; 
 
\t height:320px; 
 
\t position:absolute; 
 
\t top:0px; 
 
\t left:0px; 
 
} 
 

 
.play{ 
 
\t position:absolute; 
 
\t left:5px; 
 
\t bottom:5px; 
 
\t cursor:pointer; 
 
\t 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{ 
 
\t box-shadow: 10px 10px 7px -7px rgba(0, 0, 0, 0.5); 
 
\t -webkit-backface-visibility: hidden; 
 
\t transform: rotate(-8deg); 
 
\t margin-bottom:30px; 
 
\t width:380px; 
 
\t height:320px; 
 
\t background-color:rgba(255, 255, 255, 1.0); 
 
\t text-align:right; 
 
\t padding-top:10px; 
 
\t padding-right:10px; 
 
\t padding-left:10px; 
 
\t padding-bottom:15px; 
 
\t top:15px; 
 
\t left:25px; 
 
\t position:relative; 
 
} 
 

 
.photo1{ 
 
\t width:100%; 
 
\t height:85%; 
 
\t position:relative; 
 
\t padding:5px; 
 
} 
 

 
.date1{ 
 
\t margin:0; 
 
\t padding-right:10px; 
 
\t font-family: 'Covered By Your Grace', cursive; 
 
\t transform: rotate(-5deg); 
 
\t font-size:28px; 
 
} 
 

 
.mySlides1{ 
 
\t display:none; 
 
\t width:380px; 
 
\t height:320px; 
 
\t position:absolute; 
 
\t top:0px; 
 
\t left:0px; 
 
} 
 

 
.play{ 
 
\t position:absolute; 
 
\t left:5px; 
 
\t bottom:5px; 
 
\t cursor:pointer; 
 
\t 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>