JavaScript 中ui li中的li做到内容轮播效果

幼稚鬼_Blog

已于 2024-02-20 11:58:33 修改

阅读量485

点赞数 7

文章标签：前端 javascript

于 2024-02-20 11:54:06 首次发布

本文链接：https://blog.csdn.net/m0_59642018/article/details/136187043

版权

HTML

 <ul id="myList">
        <li>【A区一排非01货01层】出货【注塑机系统】件</li>
        <li>【B区一排01货架01层】入库【PCB】件</li>
        <li>【A区一排非01货01层】出货【注塑机系统】件</li>
        <li>【B区一排01货架01层】入库【PCB】件</li>
        <li>【A区一排非01货01层】出货【注塑机系统】件</li>
        <li>【B区一排01货架01层】入库【PCB】件</li>
        <li>【A区一排非01货01层】出货【注塑机系统】件</li>
        <li>【B区一排01货架01层】入库【PCB】件</li>
        <li>【A区一排非01货01层】出货【注塑机系统】件</li>
        <li>【B区一排01货架01层】入库【PCB】件</li>
        <li>【A区一排非01货01层】出货【注塑机系统】件</li>
        <li>【B区一排01货架01层】入库【PCB】件</li>
        <li>【A区一排非01货01层】出货【注塑机系统】件</li>
        <li>【B区一排01货架01层】入库【PCB】件</li>
        <li>【A区一排非01货01层】出货【注塑机系统】件</li>
      </ul>

JavaScript 代码

 const listItems = document.querySelectorAll("#myList li");
  let currentIndex = 0;

  function showNextItem() {
    listItems[currentIndex].style.display = "none"; // 隐藏当前项

    // 将当前项的内容保存
    const currentContent = listItems[currentIndex].innerHTML;

    // 创建新的 li 元素，并将当前内容添加到其中
    const newItem = document.createElement("li");
    newItem.innerHTML = currentContent;

    // 将新元素添加到列表的末尾
    document.getElementById("myList").appendChild(newItem);

    // 将索引指向下一个项
    currentIndex = (currentIndex + 1) % listItems.length;

    // 更新当前项内容为下一个项的内容
    listItems[currentIndex].style.display = "block";
  }

  listItems[currentIndex].style.display = "block";

  // 启动循环轮播
  function startCarousel() {
    setInterval(showNextItem, 1000); // 每隔2秒切换一次内容
  }

  startCarousel();

每隔1秒切换一次内容，并且在轮播后将当前数据新增在数组的最末端，同时保持当前数据不隐藏