轮播图总结

<!DOCTYPE html>
<html lang="zh-CN">
<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');
  //导入js模块
  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);
      };
    });
    // 按钮数组,三个span
    const btnArr = [...btns.children];
    console.log(btnArr);
    // 按钮索引的数组
    const btnKeys = Object.keys(btns.children);
    console.log(btnKeys);
    //设置定时播放为2s
    setInterval(
            function (btnArr, btnKeys) {
              timePlay(btnArr, btnKeys);
            },
            2000,
            btnArr,
            btnKeys
    );
  };
</script>
</body>
</html>

// * 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) {
    // 计算出所有图片的数量,根据这个来创建相同数量的按钮
    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;
    });
    // 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 };

相关文章