轮播图实例

    <div class="slideshow">
      <!-- 1. 图片容器 -->
      <div class="imgs"></div>
      <!-- 2. 按钮容器 -->
      <div class="btns"></div>
    </div>
    <script type="module">
      // 1.获取图片容器和按钮容器
      const imgs = document.querySelector(".imgs");
      const btns = document.querySelector(".btns");
      //   2.导入轮播图模板
      import {
        createImgs,
        createBtns,
        switchImg,
        timePlay,
      } from "./static/js/slideshow.js";
      window.onload = () => {
        // (1)创建图片组
        createImgs(imgs);
        // (2)创建按钮组
        createBtns(imgs, btns);
        // (3)创建按钮事件
        [...btns.children].forEach(function (btn) {
          btn.onclick = function () {
            switchImg(this, imgs);
          };
        });
        // (4)定时器
        // 按钮数组
        const btnArr = [...btns.children];
        const btnKeys = Object.keys(btns.children);
        setInterval(
          function (btnArr, btnKeys) {
            timePlay(btnArr, btnKeys);
          },
          2000,
          btnArr,
          btnKeys
        );
      };
    </script>

// todo 轮播图模块
// * 1.图片组
const imgArr = [
  {
    key: 1,
    src: "static/images/1.jpg",
    url: "https://php.cn",
  },
  {
    key: 2,
    src: "static/images/2.jpg",
    url: "https://php.cn",
  },
  {
    key: 3,
    src: "static/images/3.jpg",
    url: "https://php.cn",
  },
];
// * 2.创建图片组
function createImgs(imgs) {
  const frag = new DocumentFragment();
  for (let i = 0; i < imgArr.length; i++) {
    // 创建图片元素
    // const img = document.createElement("img");
    const img = new Image();
    // 2.添加属性
    img.src = imgArr[i].src;
    img.dataset.key = imgArr[i].key;
    if (i === 0) img.classList.add("active");
    // 3.添加事件
    img.onclick = () => (location.href = imgArr[i].url);
    frag.append(img);
  }
  imgs.append(frag);
}
// 3.创建按钮组
function createBtns(imgs, btns) {
  let length = imgs.childElementCount;
  for (let i = 0; i < length; i++) {
    // 1.生成按钮
    const btn = document.createElement("span");
    // 2.按钮索引
    btn.dataset.key = imgs.children[i].dataset.key;
    // 3.第一个按钮激活
    if (i === 0) btn.classList.add("active");
    // 4.添加到容器中
    btns.append(btn);
  }
}
// 4.按钮点击事件
function switchImg(btn, imgs) {
  // 1. 去掉图片和按钮的激活状态
  [...btn.parentNode.children].forEach(btn => btn.classList.remove("active"));
  [...imgs.children].forEach(img => img.classList.remove("active"));
  // 2. 将当前的按钮处于激活状态
  btn.classList.add("active");
  // 3. 根据按钮索引,找到对应的图片
  const currImg = [...imgs.children].find(function (img) {
    return img.dataset.key == btn.dataset.key;
  });
  //   const currImg = [...imgs.children].find(img => img.dataset.key == btn.dataset.key);
  //   console.log(currImg);
  // 4. 将当前图片处于激活状态(显示出来)
  currImg.classList.add("active");
}
// 5.定时播放
function timePlay(btnArr, btnKeys) {
  let key = btnKeys.shift();
  btnArr[key].dispatchEvent(new Event("click"));
  btnKeys.push(key);
}
export { createImgs, createBtns, switchImg, timePlay };