<!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-key img.dataset.key = imgArr[i].key // 给第一张图片添加一个active,默认显示第一张图片 if (i===0)img.classList.add('active'); // 图片被点击，就跳转到当前图片对应的URL img.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 };
