我的自动jquery滑块的播放/暂停按钮

Question

所以我有一个自动jquery滑块，我想通过播放/暂停按钮来控制。目前滑块在页面加载时开始，但我希望能够通过播放按钮开始/暂停它，类=心脏。

我希望播放类的图像成为播放/暂停按钮。

我目前不知道该怎么做，这是我的代码：

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>