时间戳

首页 > 解决方案 > 如何使用 JS 制作幻灯片

javascript - 如何使用 JS 制作幻灯片

问题描述

我正在努力完成我的第一个网站，我的截止日期很短，我知道 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

标签： javascripthtmlcss

解决方案

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

  1. 使用数组在 DOM 中呈现幻灯片会使您的结构动态化。动态意味着，每次您想要添加新幻灯片时，都可以将新slide对象附加到幻灯片数组中，而不是在每张幻灯片上手动编写 HTML 和 JavaScript。

  2. 一旦你定义了所有的幻灯片代码，你就可以轻松地维护你的代码，而不是阅读多行代码，你只需要关心你的 JavaScript 代码。

  3. 不太容易出错，每次您复制/粘贴 HTML 或 JavaScript 以构建另一张幻灯片时，您都必须根据新幻灯片更改值，有时这会变成一项杂乱无章的工作，从而导致将来出现错误。

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

幻灯片教程

推荐阅读