Остановите setInterval с помощью кнопок на слайдере - PullRequest
Новая
       21

Остановите setInterval с помощью кнопок на слайдере

0 голосов
/ 17 декабря 2018

Будучи совершенно новым для Javascript, я не могу решить эту проблему самостоятельно.

У меня есть этот простой слайдер с кнопками «следующий» и «предыдущий», а также точки, которые указывают, какой слайд отображается в данный момент.Кнопки работают должным образом, и у ползунка также есть setInterval -funtion, который показывает каждый слайд через 2 секунды.

Моя единственная проблема в том, что я бы хотел, чтобы функция setInterval остановилась, когда пользователь нажимает кнопку «Далее».или «предыдущая» кнопка или одна из точек.Может ли кто-нибудь помочь мне добиться этого?Заранее спасибо! 

var slideIndex = 1;
showSlides(slideIndex);

function plusSlides(n) {
  showSlides(slideIndex += n);
}

window.setInterval(function(){
    plusSlides(1);
}, 2000);

function currentSlide(n) {
  showSlides(slideIndex = n);
}

function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  var dots = document.getElementsByClassName("dot");
  if (n > slides.length) {slideIndex = 1}    
  if (n < 1) {slideIndex = slides.length}
  for (i = 0; i < slides.length; i++) {
      slides[i].style.display = "none";  
  }
  for (i = 0; i < dots.length; i++) {
      dots[i].className = dots[i].className.replace(" active", "");
  }
  slides[slideIndex-1].style.display = "block";  
  dots[slideIndex-1].className += " active";
}
.logocontainer {
  width: 800px;
  height: 100px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  background-color: lightblue;
}

.maincontainer {
  width: 800px;
  height: 150px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: lightblue;
}

.dot-container {
  width: 800px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: lightblue;
}

.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  background-color: #fff;
  border-radius: 50%;
  margin: 5px;
}

.active, .dot:hover {
  background-color: black;
}

.ctacontainer {
  width: 800px;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: lightblue;
}

.ctacontainer a {
  text-decoration: none;
  background-color: orange;
  padding: 10px 20px 10px 20px;
  border-radius: 3px;
  color: white;
}

.containeritems {
  width: 400px;
  height: 150px;
  display: flex;
  position: relative;
  justify-content: center;
  align-items: center;
}

.mySlides div:nth-child(n) {
  animation-name: fader;
  animation-duration: 1s;
  z-index: 20;
}

@keyframes fader {
  from { opacity: 0.0; }
  to { opacity: 1.0; }
}

.prev, .next {
  cursor: pointer;
  padding: 12px;
  user-select: none;
  background-color: #000;
  color: white;
  margin: 5px;
  border-radius: 3px;
}

.image1, .image2, .image3 {
  display: flex;
  justify-content: center;
  align-items: center; /* OR FLEX-END */
  position: relative;
  color: white;
  width: 700px;
  height: 150px;
}

.image1 {
  background-color: lightgreen;
}

.image2 {
  background-color: lightgrey;
}

.image3 {
  background-color: red;
}
<head>
  <link rel = "stylesheet"
   type = "text/css"
   href = "Simpleslider.css" />
  
<meta name="viewport" content="width=800, initial-scale=1">
  
</head>

<div class="logocontainer">
  <h1>Logo</h1>
</div>

<div class="maincontainer">
  
  <div class="containeritems">
    
    <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
    
    <div class="mySlides">
      <div class="image1"><h2>Image 1</h2></div>
     </div>
    <div class="mySlides">
      <div class="image2"><h2>Image 2</h2></div>
     </div>
    <div class="mySlides">
      <div class="image3"><h2>Image 3</h2></div>
     </div>
    
    <a class="next" onclick="plusSlides(1)">&#10095;</a>
    
  </div>
  
</div>

  <div class="dot-container">
  
  <span class="dot" onclick="currentSlide(1)"></span>
  <span class="dot" onclick="currentSlide(2)"></span>
  <span class="dot" onclick="currentSlide(3)"></span>
  
</div>

<div class="ctacontainer">
  <a href="#">Click here</a>
</div>

<!-- INCLUDE JAVASCRIPT-->

<script type="text/javascript" src="Simpleslider.js"></script>

1 Ответ

0 голосов
/ 17 декабря 2018 
var intervalName = setInterval(function(){
    plusSlides(1);
}, 2000);

При нажатии кнопки: 

clearInterval(intervalName);
...