轮播图实例

2022年11月24日 16:16:33阅读数:153博客 / PHui / 作业
  1. <div class="slideshow">
  2. <!-- 1. 图片容器 -->
  3. <div class="imgs"></div>
  4. <!-- 2. 按钮容器 -->
  5. <div class="btns"></div>
  6. </div>
  7. <script type="module">
  8. // 1.获取图片容器和按钮容器
  9. const imgs = document.querySelector(".imgs");
  10. const btns = document.querySelector(".btns");
  11. // 2.导入轮播图模板
  12. import {
  13. createImgs,
  14. createBtns,
  15. switchImg,
  16. timePlay,
  17. } from "./static/js/slideshow.js";
  18. window.onload = () => {
  19. // (1)创建图片组
  20. createImgs(imgs);
  21. // (2)创建按钮组
  22. createBtns(imgs, btns);
  23. // (3)创建按钮事件
  24. [...btns.children].forEach(function (btn) {
  25. btn.onclick = function () {
  26. switchImg(this, imgs);
  27. };
  28. });
  29. // (4)定时器
  30. // 按钮数组
  31. const btnArr = [...btns.children];
  32. const btnKeys = Object.keys(btns.children);
  33. setInterval(
  34. function (btnArr, btnKeys) {
  35. timePlay(btnArr, btnKeys);
  36. },
  37. 2000,
  38. btnArr,
  39. btnKeys
  40. );
  41. };
  42. </script>
  1. // todo 轮播图模块
  2. // * 1.图片组
  3. const imgArr = [
  4. {
  5. key: 1,
  6. src: "static/images/1.jpg",
  7. url: "https://php.cn",
  8. },
  9. {
  10. key: 2,
  11. src: "static/images/2.jpg",
  12. url: "https://php.cn",
  13. },
  14. {
  15. key: 3,
  16. src: "static/images/3.jpg",
  17. url: "https://php.cn",
  18. },
  19. ];
  20. // * 2.创建图片组
  21. function createImgs(imgs) {
  22. const frag = new DocumentFragment();
  23. for (let i = 0; i < imgArr.length; i++) {
  24. // 创建图片元素
  25. // const img = document.createElement("img");
  26. const img = new Image();
  27. // 2.添加属性
  28. img.src = imgArr[i].src;
  29. img.dataset.key = imgArr[i].key;
  30. if (i === 0) img.classList.add("active");
  31. // 3.添加事件
  32. img.onclick = () => (location.href = imgArr[i].url);
  33. frag.append(img);
  34. }
  35. imgs.append(frag);
  36. }
  37. // 3.创建按钮组
  38. function createBtns(imgs, btns) {
  39. let length = imgs.childElementCount;
  40. for (let i = 0; i < length; i++) {
  41. // 1.生成按钮
  42. const btn = document.createElement("span");
  43. // 2.按钮索引
  44. btn.dataset.key = imgs.children[i].dataset.key;
  45. // 3.第一个按钮激活
  46. if (i === 0) btn.classList.add("active");
  47. // 4.添加到容器中
  48. btns.append(btn);
  49. }
  50. }
  51. // 4.按钮点击事件
  52. function switchImg(btn, imgs) {
  53. // 1. 去掉图片和按钮的激活状态
  54. [...btn.parentNode.children].forEach(btn => btn.classList.remove("active"));
  55. [...imgs.children].forEach(img => img.classList.remove("active"));
  56. // 2. 将当前的按钮处于激活状态
  57. btn.classList.add("active");
  58. // 3. 根据按钮索引,找到对应的图片
  59. const currImg = [...imgs.children].find(function (img) {
  60. return img.dataset.key == btn.dataset.key;
  61. });
  62. // const currImg = [...imgs.children].find(img => img.dataset.key == btn.dataset.key);
  63. // console.log(currImg);
  64. // 4. 将当前图片处于激活状态(显示出来)
  65. currImg.classList.add("active");
  66. }
  67. // 5.定时播放
  68. function timePlay(btnArr, btnKeys) {
  69. let key = btnKeys.shift();
  70. btnArr[key].dispatchEvent(new Event("click"));
  71. btnKeys.push(key);
  72. }
  73. export { createImgs, createBtns, switchImg, timePlay };

批改状态:合格

老师批语:

版权申明:本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!

全部评论

文明上网理性发言,请遵守新闻评论服务协议

条评论
  • 博主信息
    PHui
    博文
    23
    粉丝
    0
    评论
    0
    访问量
    1539
    积分:0
    P豆:48