Получение javascript, чтобы не запускать определенный код, если нажата ссылка - PullRequest
Новая
       10

Получение javascript, чтобы не запускать определенный код, если нажата ссылка

0 голосов
/ 24 февраля 2020

Привет и извинения, если мой вопрос неясен из-за отсутствия моих javascript знаний. Я самоучка php: er и решила попробовать javascript с подходом php. Итак, вот моя проблема:

Я хочу сделать слайд-шоу из фотографий, которые:

1) имеют кнопки для go next / prev pi c, ( работает)

2) автоматически меняет изображение каждые X секунд, (работает)

3) прекращает автоматическое изменение изображений после предварительного просмотра всей серии изображений (работает)

4) прекращает автоматическое изменение изображений, если нажата следующая / предыдущая кнопка. (не работает)

1 - 3 Мне удалось выяснить. Но по причинам вне моего понимания c я не могу сделать # 4! Я попытался установить переменную "lap" , если установлена ​​переменная "n" . То, что я думал, означало, что если была нажата кнопка «следующий / предыдущий», то будет установлен круг , а коды javascript не будут читать строку, которая settimeout showSlides. Это не сработало, сколько бы я ни пробовал! Не могли бы вы мне помочь? Вот мои коды:

CSS ниже 

/* Slideshow container */
.slideshow-container {
  position: relative;
  margin: auto;
}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  width: auto;
  padding: 16px;
  margin-top: -22px;
  color: #595959;
  font-weight: normal;
  font-size: 38px;
  transition: 0.6s ease;
  user-select: none;
}

/* Position the "next button" to the right */
.next {
  top:50px;
  right: 0;
}

.prev {
  top:50px;
  left: 0;
}

HTML ниже 

<td class='slideshow-container' valign='top' style='width:50%;padding:3%;text-align:center;'>
    <center>
        <div class='mySlides fade' style='position:relative;'>
        <img src='forsig.JPG' style='width:90%'>
        </div>
        <div class='mySlides fade' style='position:relative;'>
        <img src='grundblocket.JPG' style='width:90%'>
        </div>
        <div class='mySlides fade' style='position:relative;'>
        <img src='kajaky.JPG' style='width:90%'>
        </div>
        <div class='mySlides fade' style='position:relative;'>
        <img src='Rescueshot1.jpg' style='width:90%'>
        </div>
        <div class='mySlides fade' style='position:relative;'>
        <img src='rescueshot2.jpg' style='width:90%'>
        </div>
        <div class='mySlides fade' style='position:relative;'>
        <img src='skoretc.JPG' style='width:90%'>
        </div>
    echo "</center>
    <a class='prev' onclick='plusSlides(-1)'>&#10094;</a>
    <a class='next' onclick='plusSlides(1)'>&#10095;</a>
</td>

Javascript ниже: 

<script>
var slideIndex = 0;
showSlides();

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

function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  if (n > slides.length) {slideIndex = 1}  
  if (n < 1) {slideIndex = slides.length}
  for (i = 0; i < slides.length; i++) {
      slides[i].style.display = "none";  
  }
  if (typeof n == 'undefined') {slideIndex++;}
  if (slideIndex > slides.length) {slideIndex = 1} 
  if (slideIndex == slides.length) {var lap = "ye"}
  slides[slideIndex-1].style.display = "block";  
  if (typeof lap == 'undefined') {
     if (typeof n == 'undefined') {setTimeout(showSlides, 5000);}
  }
}
</script>

Ответы [ 2 ]

0 голосов
/ 24 февраля 2020

Вот код, который сейчас делает то, что я хочу: 

<script>
var slideIndex = 0;
var lap
var to
showSlides();

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

function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  if (n > slides.length) {slideIndex = 1}  
  if (n < 1) {slideIndex = slides.length}
  for (i = 0; i < slides.length; i++) {
      slides[i].style.display = "none";  
  }
  if (typeof n == 'undefined') {slideIndex++;}
  if (slideIndex > slides.length) {slideIndex = 1} 
  if (slideIndex == slides.length) {lap = "ye"}
  if (typeof n !== 'undefined') {
      lap = "ye";
      clearTimeout(to);
  }
  slides[slideIndex-1].style.display = "block";  
  if (typeof lap == 'undefined') {
     if (typeof n == 'undefined') {to = setTimeout(showSlides, 5000);}
  }
}
</script>
0 голосов
/ 24 февраля 2020

Добавьте var lap; вверху, куда идет var slideIndex = 0;, замените var lap = "ye"; на lap = "ye"; Теперь вы можете установить переменную lap с любой другой функцией, и она остановит автозапуск. Оставив некоторые детали для вас, чтобы выяснить.

...