轮播图实例
<divclass=“slideshow”><!– 1. 图片容器 –><divclass=“imgs”></div><!– 2. 按钮容器 –><divclass=“btns”></div></div><scripttype=“module”>// 1.获取图片容器和按钮容器const imgs = document.querySelector(“.imgs”);const btns = document.querySelector(“.btns”);// 2.导入轮播图模板import{ createImgs, createBtns, switchImg, timePlay,} from “./系统开发mhkj33static/js/slideshow.js”; window.onload =()=>{// (1)创建图片组 createImgs(imgs);// (2)创建按钮组 createBtns(imgs, btns);// (3)创建按钮事件[…btns.children].forEach(function(btn){ btn.onclick =function(){ switchImg(this, imgs);};});// (4)定时器// 按钮数组const btnArr =[…btns.children];const btnKeys =Object.keys(btns.children);setInte系统开发mhkj33rval(function(btnArr, btnKeys){ timePlay(btnArr, btnKeys);},2000, btnArr, btnKeys);};</script>
// todo 轮播图模块// * 1.图片组const imgArr =[{ key:1, src:“static/images/1.jpg”, url:“https://wcqh.cn“,},{ key:2, src:“static/images/2.jpg”, url:“https://wcqh.cn“,},{ key:3, src:“static/images/3.jpg”, url:“https://wcqh.cn“,},];// * 系统开发mhkj332.创建图片组function createImgs(imgs){const frag =newDocumentFragment();for(let i =0; i < imgArr.length; i++){// 创建图片元素// const img = document.createElement(“img”);const img =newImage();// 2.添加属性 img.src = imgArr[i].src; img.dataset.key = imgArr[i].key;if(i ===0) img.classList.add(“active”);// 3.添加事件 img.onclick =()=>(locat系统开发mhkj33ion.href = imgArr[i].url); frag.append(img);} imgs.append(frag);}// 3.创建按钮组function createBtns(imgs, btns){ let length = imgs.childElementCount;for(let i =0; i < length; i++){// 1.生成按钮const btn = document.createElement(“span”);// 2.按钮索引 btn.dataset.key = imgs.children[i].dataset.key;// 3.第一个按钮激活if(i ===0) btn.classList.a系统开发mhkj33dd(“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. 根据按钮索引,找到对系统开发mhkj33应的图片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,btnK系统开发mhkj33eys){ let key = btnKeys.shift(); btnArr[key].dispatchEvent(newEvent(“click”)); btnKeys.push(key);}export{ createImgs, createBtns, switchImg, timePlay };
© 版权声明
1.如需技术支持联系QQ：1339833655
2. 本站所有资源来源于用户上传和网络，如有侵权请邮件联系站长！
3. 分享目的仅供大家学习和交流，您必须在下载后24小时内删除！
4. 不得使用于非法商业用途，不得违反国家法律。否则后果自负！
5. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
6. 如有链接无法下载、失效或广告，请联系管理员处理！
7. 本站资源售价只是摆设，本站源码仅提供给会员学习使用！
8. 如遇到加密压缩包，请使用360解压,如遇到无法解压的请联系管理员！
THE END
会员专属
暂无评论内容