收藏
PHPz批改状态：合格
老师批语：总体效果不错, 继续加油
<!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>Document</title><style>* {margin: 0;padding: 0;box-sizing: border-box;}.slideshow {width: 240px;height: 360px;}.slideshow .imgs {width: inherit;height: inherit;}.slideshow img {width: 100%;height: 100%;border-radius: 10px;/* 默认情况下需要全部隐藏 */display: none;}/* 当class有active的属性时,为激活状态 显示图片 */.slideshow img.active {display: block;}/* 当鼠标悬停时,有点击模样 */.slideshow img:hover {cursor: pointer;}.slideshow .btns {display: flex;place-content: center;transform: translateY(-40px);}.slideshow span {height: 16px;width: 16px;/* 未激活属于透明状态 */background-color: rgba(233, 233, 233, 0.5);margin: 5px;border-radius: 50%;}.slideshow span.active {/* 激活状态给个颜色 */background-color: orangered;}.slideshow span:hover {cursor: pointer;}</style></head><body><div class="slideshow"><!-- 1. 图片容器 --><div class="imgs"><!-- <img src="./1111/slideshow/static/images/item1.jpeg" alt="" class="active" /><img src="./1111/slideshow/static/images/item2.jpeg" alt="" /><img src="./1111/slideshow/static/images/item3.jpeg" alt="" /> --></div><!-- 2. 按钮容器 --><div class="btns"><!-- <span class="active"></span><span></span><span></span> --></div></div><script type="module">import { createImgs, createBtns, switchImg, timePlay } from '/pic.js';// 拿到容器 方便以下直接使用const imgs = document.querySelector('.imgs');const btns = document.querySelector('.btns');//网站一加载 就开始运行这些jswindow.onload = function () {// 创建图片组createImgs(imgs)// 创建按钮组createBtns(imgs, btns)//btns.children是个类数组,用...转换成数组 使用foreach 让每个按钮都绑定上点击事件const arrbtn = [...btns.children];arrbtn.forEach(function (btn) {btn.onclick = function () {switchImg(this, imgs)}})const btnArr = [...btns.children];// 按钮索引的数组const btnKeys = Object.keys(btns.children);setInterval(function (btnArr, btnKeys) {timePlay(btnArr, btnKeys);},1000,btnArr,btnKeys);}</script></body></html>
const Arrimg = [{key: 1,url: "http://baidu.com",src: "./1111/slideshow/static/images/item1.jpeg",},{key: 2,url: "http://baidu.com",src: "./1111/slideshow/static/images/item2.jpeg",},{key: 3,url: "http://baidu.com",src: "./1111/slideshow/static/images/item3.jpeg",},];// 创建图片function createImgs(imgs) {// 创建局部代码片段const frag = new DocumentFragment();for (let i = 0; i < Arrimg.length; i++) {// 创建imgconst img = document.createElement("img");img.src = Arrimg[i].src;img.dataset.key = Arrimg[i].key;// 让第一个img处于激活状态if (i === 0) {img.classList.add("active");}//给每个图片绑定上一个点击事件img.onclick = function () {location.href = Arrimg[i].url;};// 把每个img加入到临时代码片段中frag.append(img);}// 加入到图片容器imgs.append(frag);}// 创建按钮 有多少图片 就要创建多少按钮function createBtns(imgs, btns) {// 数组长度 就是按钮的个数let length = Arrimg.length;for (let i = 0; i < length; i++) {// 创建按钮元素const btn = document.createElement("span");// 让按钮的key 和 图片的key 一一对应btn.dataset.key =imgs.children[i].dataset.key;// 同样 让第一个按钮处于激活状态if (i === 0) {btn.classList.add("active");}// 把每个btn 加入到按钮容器中btns.append(btn);}}// 创建按钮点击事件 切换激活状态function switchImg(btn, imgs) {// 先让所有按钮的激活状态全部取消[...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;});currImg.classList.add("active");}// 定时播放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};
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
