仿写轮播图

/**
 * 轮播图功能模块
 */
import imgArr from './data.js'
// 1.创建图片组
function createImg(imgs){
    // 创建文档片段
    const frag = new DocumentFragment()
    for(let i=0; i<imgArr.length; i++){
        const img = document.createElement('img')
        img.src = imgArr[i].src
        img.dataset.key = imgArr[i].key
        if(i==0) img.classList.add('active')
        img.onclick = () => (location.href = imgArr[i].url)
        frag.append(img)
    }
    imgs.append(frag)
}
// 2.创建按钮组
function createBtn(imgs, btns){
    // 获取图片数量
    let length = imgs.childElementCount
    for(let i=0; i<length; i++){
        const span = document.createElement('span')
        span.dataset.key = imgs.children[i].dataset.key
        if(i==0) span.classList.add('active')
        btns.append(span)
    }
}
// 3.创建按钮事件: 实现图片的切换
function switchImg(btn, img) {
    // 拿到父元素下所有子元素
    ;[...btn.parentNode.children].forEach(btn=>btn.classList.remove('active'))
    ;[...img.children].forEach(img=>img.classList.remove('active'))
    btn.classList.add('active')
    // 通过按钮获取图片
    const currImg = [...img.children].find(img=>img.dataset.key==btn.dataset.key)
    currImg.classList.add('active')
}
// 4.定时轮播器: 间歇式的定时器
function timePlay(btnsArr, btnKeys){
    let key = btnKeys.shift()
    btnsArr[key].dispatchEvent(new Event('click'))
    btnKeys.push(key)
}
export default{
    createImg, createBtn, switchImg, timePlay,
}

在css文件增加两行代码，解决了图片变形问题。

/* 轮播图容器 */
  .slideshow {
    width: 240px;
    height: 360px;
    /* em / rem  */
    overflow: hidden;
    border-radius: 10px;
  }

总结：

时间有限，只是按照课程介绍又仿写了一遍，通过overflow设置解决了图片比例不同时发生变形的问题，周末还要多练习。