Question

我只是想学习构建滑块的最简单的javascript方法＆gt; 它是如何理解一系列div TImage.Refresh()并逐一重复的？请知道这对你来说非常简单，但我只是在起点！：D

Answer 1

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

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

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

＆＃13;

(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);
  }
})();

＆＃13;

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

＆＃13;

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

＆＃13;

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

用于构建滑块的最简单的Javascript代码

1 个答案: