创建从一个元素到另一个元素的javascript自动滑块

Question

我是javascript新手，如果这个问题听起来像是“业余”，我深表歉意。

我正在尝试创建一个JavaScript滑块，该滑块会在2秒后自动从第一个li元素移动到第二个list元素，直到它通过所有第n个元素。

这是我为HTML所做的工作：

 <ul id ="animals">
              <li>dog</li>
              <li>cat</li>
              <li>fish</li>
          </ul>

css：

ul li{
  display: inline;
}

javascript：

<script>
function myFunction() {
  var list = document.getElementById("animals")
  var newLI = document.createElement('li');
  newLI.innerHTML = 'cat';
}
</script>

所以它的工作就像旋转木马。继续执行此任务的最佳方法是什么？

Answer 1

JavaScript实现中非常幼稚的本机可能是这样的：https://stackblitz.com/edit/js-bz9cwi?file=index.js

startCarousel();

function startCarousel() {
  var list = document.getElementById("animals");
  var nrOfItems = list.children.length;
  var counter = 0;
  setInterval(()=>{
    list.children[counter].style["display"] = "none";
    counter = (counter + 1) % nrOfItems;
    list.children[counter].style["display"] = "inline";
  }, 1000);
}

但是您可能想看看jQuery，bootstrap等框架...它们具有以下内置功能：https://getbootstrap.com/docs/4.0/components/carousel/