如果单击链接，使 javascript 不运行特定代码

Question

您好，如果我的问题由于缺乏 javascript 知识而不清楚，我深表歉意。 我是一个自学的 php:er 并决定用 php 方法尝试 javascript。 所以这是我的问题：

我想制作图片幻灯片，其中：

1）有按钮可以转到下一张/上一张图片，（有效）

2) 每 X 秒自动更改图片，(有效)

3) 全系列图片预览完毕后自动停止换图，（有效）

4) 如果按下了下一个/上一个按钮，则自动停止更改图片。 （不起作用）

1 - 3 我设法弄明白了。 但出于超出我可悲理解的原因，我不能做#4！ 如果设置了“n”变量，我试图设置一个“lap”变量。 而且我认为他的意思是，如果“下一个/上一个”按钮被按下，圈将被设置和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>

Answer 1

添加var lap; 在var slideIndex = 0;的顶部var slideIndex = 0; 去，替换var lap = "ye"; with lap = "ye"; 现在，您可以使用任何其他功能设置lap变量，它会停止自动播放。 留下一些细节让你弄清楚。

Answer 2

这是现在做我想要它做的代码：

<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>