轮播图的制作

一、轮播图的html代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>轮播图</title>
    <link rel="stylesheet" href="static/css/slideshow.css" />
  </head>
  <body>
    <div class="slideshow">
      <!-- 1.图片容器 -->
      <div class="imgs"></div>
      <!-- 2.按钮容器 -->
      <div class="btns"></div>
    </div>
    <script type="module">
      const imgs = document.querySelector(`.imgs`);
      const btns = document.querySelector(`.btns`);
      // 2.导入轮播图模块
      // （1）创建图片组：createImgs（）
      // （2）创建按钮组：createBtns（）
      // （3）创建按钮事件：switchImg（）
      // （4）定时器：
      import {
        createImgs,
        createBtns,
        switchImg,
        timePlay,
      } from "./static/js/slideshow.js";
      // 3.加载成功将图片以及按钮渲染出来
      window.onload = () => {
        // 1.创建图片组
        createImgs(imgs);
        // 2.创建按钮组
        createBtns(imgs, btns);
        // 3.添加事件
        [...btns.children].forEach(function (btn) {
          btn.onclick = function () {
            switchImg(this, imgs);
          };
        });
        // (4)定时器timePlay()
        // 按钮数组，三个span
        const btnArr = [...btns.children];
        // 按钮索引数组
        const btnKeys = Object.keys(btns.children);
        setInterval(
          function (btnArr, btnKeys) {
            timePlay(btnArr, btnKeys);
          },
          2000,
          btnArr,
          btnKeys
        );
      };
    </script>
  </body>
</html>

二、轮播图的js代码

// todo 轮播图模块
// * 1. 图片组
const imgArr = [
  {
    key: 1,
    src: "static/images/item1.jpeg",
    url: "https://php.cn",
  },
  {
    key: 2,
    src: "static/images/item2.jpeg",
    url: "https://php.cn",
  },
  {
    key: 3,
    src: "static/images/item3.jpeg",
    url: "https://php.cn",
  },
];
// * 2. 创建图片组
function createImgs(imgs) {
  // 图片资源比较大,所以建议用文档片断来做
  const frag = new DocumentFragment();
  for (let i = 0; i < imgArr.length; i++) {
    // 1. 创建图片元素
    // const img = document.createElement('img')
    const img = new Image();
    // 2. 添加属性
    // src
    img.src = imgArr[i].src;
    // data-key
    img.dataset.key = imgArr[i].key;
    // class='active': 第一张
    if (i === 0) img.classList.add("active");
    // 3. 添加事件
    img.onclick = () => (location.href = imgArr[i].url);
    // 添加图片分二步: 第一步加到内存中的文档片断元素上, 第二步再加到图片容器上
    // 4. 添加图片到片断中
    frag.append(img);
  }
  // 5. 将片断添加到图片容器元素中
  imgs.append(frag);
}
// * 3. 创建按钮组
function createBtns(imgs, btns) {
  // 计算出所有图片的数量,根据这个来创建相同数量的按钮
  //   console.log(imgs.childElementCount);
  let length = imgs.childElementCount;
  for (let i = 0; i < length; i++) {
    // 1. 生成按钮: <span>
    const btn = document.createElement("span");
    // 2. 按钮索引: data-key, 必须与图片索引一致
    btn.dataset.key = imgs.children[i].dataset.key;
    // 3. 第1个按钮处于激活状态
    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) {
  // 1. 头部取一个
  let key = btnKeys.shift();
  // 2. 根据索引找到对应的按钮,再给它自动派发一个点击事件
  btnArr[key].dispatchEvent(new Event("click"));
  // 3. 把刚才取出的按钮再从尾部进入,实现首尾相连
  btnKeys.push(key);
}
export { createImgs, createBtns, switchImg, timePlay };

三、轮播图的css代码

body {
  background-color: #eee;
}
/* 轮播图容器 */
.slideshow {
  width: 240px;
  height: 360px;
}
/* 图片容器 */
.slideshow .imgs {
  width: inherit;
  height: inherit;
}
/* 图片适应 */
.slideshow img {
  width: 100%;
  height: 100%;
  border-radius: 10px;
  /* 默认全隐藏 */
  display: none;
}
/* 设置图片的激活状态 */
.slideshow img.active {
  display: block;
}
.slideshow img:hover {
  cursor: pointer;
}
/* ------ 按钮容器 ------- */
/* 按钮容器 */
.slideshow .btns {
  display: flex;
  place-content: center;
  /* position: relative;
  top: -40px; */
  transform: translateY(-40px);
}
.slideshow .btns > span {
  background-color: rgba(233, 233, 233, 0.5);
  height: 16px;
  width: 16px;
  border-radius: 50%;
  margin: 5px;
}
.slideshow .btns > span.active {
  background-color: orangered;
}
.slideshow .btns > span:hover {
  cursor: pointer;
}