轮播图的制作
一、轮播图的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;}
三、轮播图的实现效果
