收藏
PHPz批改状态：合格
老师批语：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=lun, initial-scale=1.0"><title>Document</title><style>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;/* 按钮上移到图片内 */transform: translate(-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;}</style></head><body><!-- 轮播图需要两个容器，一个图片容器，一个按钮容器 --><div class="slideshow"><!-- 图片容器 --><div class="imgs"></div><!-- 按钮容器 --><div class="btns"></div></div><script type="module">// 获取到图片和按钮容器const imgs = document.querySelector('imgs');const btns = document.querySelector('btns');// 导入方法import {createImgs, createBtns, switchImg, timePlay} from './js/lbt.js'// 加载成功将按钮和图片直接渲染出来window.onload = () => {// 先创建图片和按钮组createImgs(imgs)// 按钮组需要两个参数，因为要让按钮和图片对应起来createBtns(imgs, btns);// 创建按钮事件，不能绑定在父级上，因为绑定父级，点击会触发所有按钮// 吧按钮的放到一个真数组里面，才能用foreach来遍历[...btns.children].forEach(function (btn){btn.onclick = function(){// 哪个按钮被点击就显示出和当前按钮对应的图片switchImg(this, imgs);}})}// 定时器需要首位相连，才能实现循环重复播放// 拿到按钮和按钮的索引，并且放到数组中const btnArr = [...btns.children];const btnkeys = object.keys(btns.children);// 设置2秒间隔自动切换setInterval(function(btnArr,btnkeys){timePlay(btnArr,btnkeys);}, 2000, btnArr, btnkeys)</script></body></html>
// 图片组，图片需要有一个key来和按钮对应，还需要一个跳转链接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',},];// 创建图片组function createImgs(imgs){// 图片资源比较大，所以建议用文档片段来做const frag = new DocumentFragment()for (let i = 0;i<imgArr.length;i++){// 创建图片元素const img = new Image()// 添加属性// src图片路径img.src = imgArr[i].src// 给当前循环的图片添加一个data-keyimg.dataset.key = imgArr[i].key// 给第一张图片添加一个active,默认显示第一张图片if (i===0)img.classList.add('active');// 图片被点击，就跳转到当前图片对应的URLimg.onclick = () => (location.href = imgArr[i].url)// 将当前创建的img元素添加到文档片段中frag.append(img)}// 将文档片段添加到图片容器中imgs.append(frag)}// 创建按钮组function createBtns(imgs, btns){// 计算出所有图片的数量，根据这个来创建相应的按钮数// childElementCount拿到子元素的个数，也就是有几张图片，就返回数字几let length = imgs.childElementCount;for (let i = 0; i < length; i++){// 生成span标签const btn = document.createElement('span');// 按钮设置data-key，要和图片容器的子元素的data-key对应btn.dataset.key = imgs.children[i].dataset.key// 第一个按钮默认激活if(i === 0)btn.classList.add('active')// 将按钮添加到按钮容器中btns.append(btn)}}// 按钮点击事件function switchImg(btn, imgs){// 去掉图片和按钮的激活状态// 拿到按钮的父级容器，在拿到父级下面所有子元素按钮，并转换成数组来使用foreach[...btn.parentNode.children].forEach(btn => btn.classList.remove('active'));[...imgs.children].forEach(img => img.classList.remove('active'));// 将当前按钮激活btn.classList.add('active')// 根据当前按钮索引，找到对应的图片const currImg = [...imgs.children].find(function (img){return img.dataset.key == btn.dataset.key})// 将当前图片激活显示出来currImg.classList.add('active')}// 定时播放function timePlay(btnArr, btnKeys){// 头部取一个// shift是取出的意思let key = btnkeys.shift()// 给当前按钮派发一个点击事件btnArr[key].dispatchEvent(new Event('click'))// 把刚才的按钮在从尾部进入，实现收尾相连btnkeys.push(key)// * 其实在这里我是有点不懂的，头部取出 0，然后给索引是0的按钮派发点击事件，// 然后塞回去，怎么会到最后一个}export { createImgs, createBtns, switchImg, timePlay };
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
