![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
PHPzCorrection status：qualified
Teacher's comments：
Collection
Collection
1.图片容器和按钮容器布局，获取这两个元素
2.导入模块，创建图片列表
3.根据图片数据，利用模块创建按钮
4.创建按钮事件，注意要将事件绑定到每个按钮
5.创建定时器，实现图片自动轮播功能
<!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//必须首尾相连，才能实现循环播放// 按钮数组,三个spanconst btnArr = [...btns.children];// 拿到索引数组const btnKeys = Object.keys(btns.children);setInterval((btnArr, btnKeys) => {slideshow.timePlay(btnArr, btnKeys);},2000,btnArr,btnKeys);};</script></body></html>
// 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. 生成按钮：spanconst btn = document.createElement('span');// 2. 按钮索引：data-keybtn.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 }
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;}