【JS】模块布局实战：仿淘宝移动端轮播图

模块布局实战：仿淘宝移动端轮播图

总结：

1.图片容器和按钮容器布局，获取这两个元素
2.导入模块，创建图片列表
3.根据图片数据，利用模块创建按钮
4.创建按钮事件，注意要将事件绑定到每个按钮
5.创建定时器，实现图片自动轮播功能

1.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">
      // 1.获取图片容器和按钮容器
      const imgs = document.querySelector('.imgs');
      const btns = document.querySelector('.btns');
      // console.log(imgs,btns);
      // 2.导入轮播图模块
      // (1).创建图片组：createImgs();
      // (2).创建按钮组：createBtns();
      // (3).创建按钮事件：switchImg();
      // (4).定时器：timePlay();
    //   import {
    //     createImgs,
    //     createBtns,
    //     switchImg,
    //     timePlay,
    //   } from './static/js/slideshow.js';
      //使用一个对象来挂载所有导出的模块
      import * as slideshow from './static/js/slideshow.js';
      // 3.当加载成功将图片和按钮渲染出来
      window.onload = () => {
        // (1).创建图片组：
        slideshow.createImgs(imgs);
        // (2).创建按钮组,值参：imgs确定创建多个少按钮，btns表示在什么位置
        slideshow.createBtns(imgs, btns);
        // (3).创建按钮事件方法
        // 这里不能用事件委托，应该将点击事件绑室每一个按钮上
        //拿到按钮数组，将事件添加到子元素中
        [...btns.children].forEach(function (btn) {
          //绑定每个按钮的点击事件
          btn.onclick = function () {
            //执行图片切换,this:当前按钮高亮；imgs：图片组进行查询选择显示那个
            slideshow.switchImg(this, imgs);
          };
        });
        // (4).定时器：timePlay
        // 0,1,2
        // 1,2,0
        // 2,0,1
        //必须首尾相连，才能实现循环播放
        // 按钮数组,三个span
        const btnArr = [...btns.children];
        // 拿到索引数组
        const btnKeys = Object.keys(btns.children);
        setInterval(
          (btnArr, btnKeys) => {
            slideshow.timePlay(btnArr, btnKeys);
          },
          2000,
          btnArr,
          btnKeys
        );
      };
    </script>
  </body>
</html>

2.JS示范

// todo 轮播图模块
// * 0.图片组
const imgArr = [
    {
        key: 1,
        src: "static/img/item1.jpeg",
        url: "https://php.cn"
    },
    {
        key: 2,
        src: "static/img/item2.jpeg",
        url: "https://php.cn"
    },
    {
        key: 3,
        src: "static/img/item3.jpeg",
        url: "https://php.cn"
    },
];
// * 1.创建图片组
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.添加属性
        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;
        // 4.添加图片到片断中
        frag.append(img);
    }
    // 5.添加片段到图片容器
    imgs.append(frag);
}
// * 2.创建按钮组
function createBtns(imgs, btns) {
    // 1.计算图片数量
    const imgNum = imgs.childElementCount;
    // 2.创建按钮元素
    for (let i = 0; i < imgNum; i++) {
        // 1. 生成按钮：span
        const btn = document.createElement('span');
        // 2. 按钮索引：data-key
        btn.dataset.key = imgs.children[i].dataset.key;
        // 3. 将第一个按钮设置为激活
        if (i === 0) btn.classList.add('active');
        // 4. 将按钮组添加到容器中
        btns.append(btn);
    }
}
// * 3.按钮点击事件
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((img) => img.dataset.key == btn.dataset.key);
    // 4. 将当前图片处于激活状态
    currimg.classList.add('active');
}
// * 4.定时器
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 }

3.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;
    /* 向上移动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;
}

模块布局实战：仿淘宝移动端轮播图

总结：

1.HTML实例：

2.JS示范

3.css示范

相关文章