Question

我正在尝试完成我的第一个网站，截止日期很短，我知道html CSS和一些JQuery，但是正确的JS对我来说仍然很困难

我想在我的网站上放一个幻灯片，这就是为什么我去w3school并尝试在我的Visual Studio代码中复制该示例。

$(document).ready(() => {
  var slideIndex = 1;
  showSlides(slideIndex);

  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";
    }

    slides[slideIndex - 1].style.display = "block";

    }

  });

.slideshow-container {
  max-width: 100%;
  position: relative;
  margin: auto;
}

.myslides {
  display: none;
}

.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

.prev:hover,
.next:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

.fade {
  -webkit-animation-duration: 1.5s;
  animation-duration: 1.5s;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="slideshow-container">
  <div class="myslides fade">
    <img src="./IMAGENS/CASA A (1).jpg" width="100%">
  </div>
  <div class="myslides fade">
    <img src="./IMAGENS/CASA B (3).jpg" width="100%">
  </div>
  <div class="myslides fade">
    <img src="./IMAGENS/MUDA_L11_02_FINAL.jpg" width="100%">
  </div>
  <div class="myslides fade">
    <img src="./IMAGENS/MUDA_L11_05_FINAL.jpg" width="100%">
  </div>
  <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
  <a class="next" onclick="plusSlides(1)">&#10095;</a>
</div>

当我尝试刷新页面时，一切看起来都很好，但是当我单击按钮来更改幻灯片时，什么也没有发生。您认为我该怎么办？

我试图用数组制作幻灯片，但是没有用。因此，我认为我的VSCODE不假设这两个元素是一个问题。

<a class="prev" onclick="plusSlides(-1)">&#10094;</a> 
<a class="next" onclick="plusSlides(1)">&#10095;</a>

在我的程序中，当我执行onclick =“ plusSlides（-1）”时，第一个报价显示为黄色，而第二个报价则显示为白色，似乎未分配onclick

Answer 1

就像@edinhajdarevic所说，由于有很多优点，使用数组是一种更好的方法，其中一些优点如下：

使用数组在DOM中渲染幻灯片可以使您的结构动态化。动态意味着，每次要添加新幻灯片时，都可以向幻灯片数组中添加新的slide对象，而不必手动为每个幻灯片编写HTML和JavaScript。
一旦定义了所有幻灯片代码，就可以轻松维护代码，而无需阅读多行代码，只需关心JavaScript代码即可。
几乎不易出错，每次复制/粘贴HTML或JavaScript来构建另一张幻灯片时，您都必须根据新幻灯片更改值，有时这会变成混乱的工作，将来会引起错误。 / p>

可以在以下W3Schools链接中找到一个不错的教程：

Slideshow Tutorial

Answer 2

我建议您使用数组来创建幻灯片，这更简单。请看一下此答案，因为这将帮助您Making image slideshow with arrays

Answer 3

您的函数是在$(document).ready的回调函数的scope中声明的，因此onclick无法访问它们。

解决方案1：将声明移到$(document).ready的回调之外。

var slideIndex = 1;

$(document).ready(() => {
  showSlides(slideIndex);
});


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";
  }

  slides[slideIndex - 1].style.display = "block";

}

.slideshow-container {
  max-width: 100%;
  position: relative;
  margin: auto;
}

.myslides {
  display: none;
}

.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

.prev:hover,
.next:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

.fade {
  -webkit-animation-duration: 1.5s;
  animation-duration: 1.5s;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="slideshow-container">
  <div class="myslides fade">
    <img src="https://via.placeholder.com/400x200&text=image+1" width="100%">
  </div>
  <div class="myslides fade">
    <img src="https://via.placeholder.com/400x200&text=image+2" width="100%">
  </div>
  <div class="myslides fade">
    <img src="https://via.placeholder.com/400x200&text=image+3" width="100%">
  </div>
  <div class="myslides fade">
    <img src="https://via.placeholder.com/400x200&text=image+4" width="100%">
  </div>
  <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
  <a class="next" onclick="plusSlides(1)">&#10095;</a>
</div>

解决方案2：删除onclick属性，并在$(document).ready的回调中添加点击侦听器

$(document).ready(() => {
  var slideIndex = 1;
  showSlides(slideIndex);

  $(".prev").click(function() {
    plusSlides(-1);
  });

  $(".next").click(function() {
    plusSlides(1);
  });

  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";
    }

    slides[slideIndex - 1].style.display = "block";

  }
});

.slideshow-container {
  max-width: 100%;
  position: relative;
  margin: auto;
}

.myslides {
  display: none;
}

.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

.prev:hover,
.next:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

.fade {
  -webkit-animation-duration: 1.5s;
  animation-duration: 1.5s;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="slideshow-container">
  <div class="myslides fade">
    <img src="https://via.placeholder.com/400x200&text=image+1" width="100%">
  </div>
  <div class="myslides fade">
    <img src="https://via.placeholder.com/400x200&text=image+2" width="100%">
  </div>
  <div class="myslides fade">
    <img src="https://via.placeholder.com/400x200&text=image+3" width="100%">
  </div>
  <div class="myslides fade">
    <img src="https://via.placeholder.com/400x200&text=image+4" width="100%">
  </div>
  <a class="prev">&#10094;</a>
  <a class="next">&#10095;</a>
</div>

如何使用JS制作幻灯片

3 个答案: