博客列表 >轮播图案例

轮播图案例

手机用户1594223549
手机用户1594223549原创
2022年11月15日 15:50:35471浏览

1.输出结果

2.代码部分

  1. // todo 轮播图模块
  2. // ! 1. 图片组
  3. const imgArr = [
  4. {
  5. key: 1,
  6. src: 'static/images/item1.jpeg',
  7. url: 'https://php.cn',
  8. },
  9. {
  10. key: 2,
  11. src: 'static/images/item2.jpeg',
  12. url: 'https://php.cn',
  13. },
  14. {
  15. key: 3,
  16. src: 'static/images/item3.jpeg',
  17. url: 'https://php.cn',
  18. },
  19. ];
  20. // ! 2. 创建图片组
  21. function createImgs(imgs) {
  22. // 图片资源比较大,所以建议用文档片断来做
  23. const frag = new DocumentFragment();
  24. for (let i =0; i < imgArr.length; i++) {
  25. // 1. 创建图片元素
  26. const img = new Image();
  27. // 2. 添加属性
  28. // src
  29. img.src = imgArr[i].src;
  30. // data-key
  31. img.dataset.key = imgArr[i].key;
  32. // class='active': 第一张
  33. if (i === 0) img.classList.add('active');
  34. // 3. 添加事件
  35. img.onclick = () => (location.href = imgArr[i].url);
  36. // 4. 添加图片到片段中
  37. // 添加图片分二步: 第一步加到内存中的文档片断元素上, 第二步再加到图片容器上
  38. frag.append(img);
  39. }
  40. // 5. 将片断添加到图片容器元素中
  41. imgs.append(frag);
  42. }
  43. // ! 3. 创建按钮组
  44. function createBtns(imgs, btns) {
  45. // 计算出所有图片的数量,根据这个来创建相同数量的按钮
  46. // console.log(imgs.childElementCount);
  47. let length = imgs.childElementCount;
  48. for (let i =0; i < length; i++) {
  49. // 1. 生成按钮: <span>
  50. const btn = document.createElement('span');
  51. // 2. 按钮索引: data-key, 必须与图片索引一致
  52. btn.dataset.key = imgs.children[i].dataset.key;
  53. // 3. 第1个按钮处于激活状态
  54. if (i === 0) btn.classList.add('active');
  55. // 4. 添加到容器中
  56. btns.append(btn);
  57. }
  58. }
  59. // ! 4.按钮点击事件
  60. function switchImg(btn, imgs) {
  61. // 1. 去掉图片和按钮的激活状态
  62. [...btn.parentNode.children].forEach(btn => btn.classList.remove('active'));
  63. [...imgs.children].forEach(img => img.classList.remove('active'));
  64. // 2. 将当前的按钮处于激活状态
  65. btn.classList.add('active');
  66. // 3. 根据按钮索引,找到对应的图片
  67. const currImg = [...imgs.children].find(function (img) {
  68. // 图片的key和按钮的key必须相等
  69. return img.dataset.key === btn.dataset.key;
  70. });
  71. // 4. 将当前图片处于激活状态(显示出来)
  72. currImg.classList.add('active');
  73. }
  74. // ! 5. 定时播放
  75. function timePlay(btnArr, btnKeys) {
  76. // 1. 头部取一个
  77. let key = btnKeys.shift();
  78. // 2. 根据索引找到对应的按钮,再给它自动派发一个点击事件
  79. btnArr[key].dispatchEvent(new Event('click'));
  80. // 3. 把刚才到出的按钮再从尾部进入,实现首尾相连
  81. btnKeys.push(key);
  82. }
  83. export { createImgs, createBtns, switchImg, timePlay };
  1. body {
  2. background-color: #eee;
  3. }
  4. /* 轮播图容器 */
  5. .slideshow {
  6. width: 240px;
  7. height: 360px;
  8. }
  9. /* 图片容器 */
  10. .slideshow .imgs {
  11. width: inherit;
  12. /* 继承 */
  13. height: inherit;
  14. }
  15. /* 图片适应 */
  16. .slideshow img {
  17. width: 100%;
  18. height: 100%;
  19. border-radius: 10px;
  20. /* 默认全隐藏 */
  21. display: none;
  22. }
  23. /* 设置图片的激活状态 */
  24. .slideshow img.active {
  25. display: block;
  26. }
  27. .slideshow img:hover {
  28. cursor: pointer;
  29. /* 小手效果 */
  30. }
  31. /* ------ 按钮容器 ------- */
  32. /* 按钮容器 */
  33. .slideshow .btns {
  34. display: flex;
  35. /* flex布局的话,里面的元素自动变成块元素了 */
  36. place-content: center;
  37. /* position: relative;
  38. top: -40px; */
  39. /* 相对定位往上移 */
  40. transform: translateY(-40px);
  41. /* 移动的时候不会渲染页面 */
  42. }
  43. .slideshow .btns > span {
  44. background-color: rgba(233, 233, 233, 0.5);
  45. height: 16px;
  46. width: 16px;
  47. border-radius: 50%;
  48. margin: 5px;
  49. }
  50. .slideshow .btns > span.active {
  51. background-color: orangered;
  52. }
  53. .slideshow .btns > span:hover {
  54. cursor: pointer;
  55. }
  1. // todo 轮播图模块
  2. // ! 1. 图片组
  3. const imgArr = [
  4. {
  5. key: 1,
  6. src: 'static/images/item1.jpeg',
  7. url: 'https://php.cn',
  8. },
  9. {
  10. key: 2,
  11. src: 'static/images/item2.jpeg',
  12. url: 'https://php.cn',
  13. },
  14. {
  15. key: 3,
  16. src: 'static/images/item3.jpeg',
  17. url: 'https://php.cn',
  18. },
  19. ];
  20. // ! 2. 创建图片组
  21. function createImgs(imgs) {
  22. // 图片资源比较大,所以建议用文档片断来做
  23. const frag = new DocumentFragment();
  24. for (let i =0; i < imgArr.length; i++) {
  25. // 1. 创建图片元素
  26. const img = new Image();
  27. // 2. 添加属性
  28. // src
  29. img.src = imgArr[i].src;
  30. // data-key
  31. img.dataset.key = imgArr[i].key;
  32. // class='active': 第一张
  33. if (i === 0) img.classList.add('active');
  34. // 3. 添加事件
  35. img.onclick = () => (location.href = imgArr[i].url);
  36. // 4. 添加图片到片段中
  37. // 添加图片分二步: 第一步加到内存中的文档片断元素上, 第二步再加到图片容器上
  38. frag.append(img);
  39. }
  40. // 5. 将片断添加到图片容器元素中
  41. imgs.append(frag);
  42. }
  43. // ! 3. 创建按钮组
  44. function createBtns(imgs, btns) {
  45. // 计算出所有图片的数量,根据这个来创建相同数量的按钮
  46. // console.log(imgs.childElementCount);
  47. let length = imgs.childElementCount;
  48. for (let i =0; i < length; i++) {
  49. // 1. 生成按钮: <span>
  50. const btn = document.createElement('span');
  51. // 2. 按钮索引: data-key, 必须与图片索引一致
  52. btn.dataset.key = imgs.children[i].dataset.key;
  53. // 3. 第1个按钮处于激活状态
  54. if (i === 0) btn.classList.add('active');
  55. // 4. 添加到容器中
  56. btns.append(btn);
  57. }
  58. }
  59. // ! 4.按钮点击事件
  60. function switchImg(btn, imgs) {
  61. // 1. 去掉图片和按钮的激活状态
  62. [...btn.parentNode.children].forEach(btn => btn.classList.remove('active'));
  63. [...imgs.children].forEach(img => img.classList.remove('active'));
  64. // 2. 将当前的按钮处于激活状态
  65. btn.classList.add('active');
  66. // 3. 根据按钮索引,找到对应的图片
  67. const currImg = [...imgs.children].find(function (img) {
  68. // 图片的key和按钮的key必须相等
  69. return img.dataset.key === btn.dataset.key;
  70. });
  71. // 4. 将当前图片处于激活状态(显示出来)
  72. currImg.classList.add('active');
  73. }
  74. // ! 5. 定时播放
  75. function timePlay(btnArr, btnKeys) {
  76. // 1. 头部取一个
  77. let key = btnKeys.shift();
  78. // 2. 根据索引找到对应的按钮,再给它自动派发一个点击事件
  79. btnArr[key].dispatchEvent(new Event('click'));
  80. // 3. 把刚才到出的按钮再从尾部进入,实现首尾相连
  81. btnKeys.push(key);
  82. }
  83. export { createImgs, createBtns, switchImg, timePlay };
声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议