用于构建循环幻灯片的最简单纯 Javascript 代码

Question

我只想学习 javascript 代码构建幻灯片的最简单方法 > 它是如何理解一连串的divs or img并一一重复的？？？我知道这对你来说很简单，但我才刚刚开始！ :D

Answer 1

从概念上讲，创建自动循环图像滑块的一种方法是重复使用 JavaScript 代码运行（使用 setInterval() 或 setTimeout()）来隐藏和显示页面上的图片，一次一张。

您只需要将图像元素放在一个可以随意更新的数组中。

这是一个没有任何动画效果的基本示例：

(function() {
  var selectedIndex = -1;
  var imgs = document.querySelectorAll(".slideshow img"),
    left = document.querySelector(".slideshow .left"),
    right = document.querySelector(".slideshow .right"),
    current = document.querySelector(".slideshow .current");
  var numSeconds = 2;
  var timeout;
  setIndex(0);
  left.addEventListener("click", function() {
    setIndex(selectedIndex - 1);
  });
  right.addEventListener("click", function() {
    setIndex(selectedIndex + 1);
  });

  function setIndex(i) {
    if (timeout) {
      clearTimeout(timeout);
    }
    if (selectedIndex >= 0) {
      imgs[selectedIndex].style.display = "none";
    }
    if (i >= imgs.length) {
      selectedIndex = 0;
    } else if (i < 0) {
      selectedIndex = 0;
    } else {
      selectedIndex = i;
    }
    imgs[selectedIndex].style.display = "inline-block";
    current.innerHTML = (selectedIndex + 1) + "/" + imgs.length;
    timeout = setTimeout(function() {
      setIndex(selectedIndex + 1)
    }, numSeconds * 1000);
  }
})();

.slideshow img {
  display: none;
  border: 1px solid black;
}
.slideshow .controls {
  max-width: 255px;
  text-align: center;
}
.slideshow .left {
  float: left;
  cursor: pointer;
}
.slideshow .right {
  float: right;
  cursor: pointer;
}

<div class="slideshow">
  <img src="http://placehold.it/250x150/000000/ffffff" />
  <img src="http://placehold.it/250x150/ff0000/ffffff" />
  <img src="http://placehold.it/250x150/00ff00/ffffff" />
  <img src="http://placehold.it/250x150/0000ff/ffffff" />
  <img src="http://placehold.it/250x150/ffffff/000000" />
  <div class="controls"> <span class="left">&lt;&lt;</span>
    <span class="current"></span>
    <span class="right">&gt;&gt;</span>

  </div>
</div>

有大量 JavaScript 库和 jQuery 扩展，您可以使用它们来获得更多功能，而无需编写太多代码。我鼓励您探索已经开发的内容以查看不同的实现。

用于构建循环幻灯片的最简单纯 Javascript 代码

The Simplest pure Javascript code to build a looping slideshow

javascript

slideshow