轮播图实战（模块实现）

编辑: admin 分类: 电脑知识 发布时间: 2023-06-14 来源:互联网
一、HTML文件
  1.     <div class="slideshow">
  2.         <!--1. 图片容器-->
  3.         <div class="imgs"></div>
  6.         <!--2. 按钮容器-->
  7.         <div class="btns"></div>
  10.         <!--所有图片，以及对应的按钮，动态创建-->
  11.     </div>
模块导入
  1.     <!--模块-->
  2.     <script type="module">
  3.         /*
  4.         import { imgArr } from './js/slideshow.js'
  5.         console.log(imgArr)
  6.         */
  8.         const imgs = document.querySelector('.imgs')
  9.         const btns = document.querySelector('.btns')
  11.         /**
  12.          * 轮播图至少需要4个函数
  13.          * 1. 创建图片组：createImgs()
  14.          * 2. 创建按钮组：createBtns()
  15.          * 3. 创建按钮事件：switchImg()
  16.          * 4. 定时轮播（定时器）：timePlay()
  17.          */
  19.         // 匿名导入
  20.         // import {createImgs, createBtns, switchImg, timePlay} from './js/slideshow.js'
  21.         import * as slide from './js/slideshow.js'
  22.         // slide.timePlay()
  24.         window.onload = function() {
  25.             // 1. 创建图片组
  26.             slide.createImgs(imgs)
  28.             // 2. 创建按钮组
  29.             slide.createBtns(imgs, btns)
  31.             // 3. 创建按钮事件
  32.             // 要逐个添加，不能用事件冒泡来简化
  33.             ;[...btns.children].forEach(function(btn) {
  34.                 btn.onclick = function() {
  35.                     slide.switchImg(btn, imgs)
  36.                 }
  37.             })
  39.             // 4. 定时轮播（定时器）
  40.             // 首尾相连，才能实现循环往复的效果
  42.             // 间歇式的定时器
  43.             // 其实定时器的参数，从第三个参数起，之后全部参数自动传递给第一个参数回调中
  44.             setInterval (function(btnArr, btnKeys) {
  45.                 console.log(btnArr, btnKeys)
  46.                 slide.timePlay(btnArr, btnKeys)
  47.                 },2000,
  48.                 [...btns.children],
  49.                 Object.keys([...btns.children])
  50.             )
  51.         }
  54.     </script>
二、CSS文件
  1. body {
  2.     background-color: #eee;
  3. }
  5. /* 轮播图容器 */
  6. .slideshow {
  7.     width: 240px;
  8.     height: 360px;
  9.     /* em / rem  */
  10. }
  12. /* 图片容器 */
  13. .slideshow .imgs {
  14.     width: inherit;
  15.     height: inherit;
  16.     /* width: 100%;
  17.     height: 100%; */
  18. }
  20. /* 图片适应 */
  21. .slideshow img {
  22.     width: 100%;
  23.     height: 100%;
  24.     border-radius: 10px;
  26.     /* ? 默认全隐藏 */
  27.     display: none;
  28. }
  30. /* 设置图片的激活状态 */
  31. .slideshow img.active {
  32.     display: block;
  33.     opacity: 1;
  34. }
  36. .slideshow img:hover {
  37.     cursor: pointer;
  38. }
  40. /* ------ 按钮容器 ------- */
  42. /* 按钮容器 */
  43. .slideshow .btns {
  44.     display: flex;
  45.     place-content: center;
  47.     position: relative;
  48.     top: -40px;
  50.     /* transform: translateY(-40px); */
  51. }
  53. .slideshow .btns > span {
  54.     background-color: rgba(233, 233, 233, 0.8);
  55.     height: 16px;
  56.     width: 16px;
  57.     border-radius: 50%;
  58.     margin: 5px;
  59. }
  61. .slideshow .btns > span.active {
  62.     background-color: orangered;
  63. }
  65. .slideshow .btns > span:hover {
  66.     cursor: pointer;
  67. }
三、JS文件3.1、data.js
  1. export default [
  2.     {
  3.         key: 1,
  4.         src: './images/item1.jpeg',
  5.         url: 'https://www.php.cn'
  6.     },
  7.     {
  8.         key: 2,
  9.         src: './images/item2.jpeg',
  10.         url: 'https://www.php.cn'
  11.     },
  12.     {
  13.         key: 3,
  14.         src: './images/item3.jpeg',
  15.         url: 'https://www.php.cn'
  16.     },
  17. ]
3.2、slideshow.js
  1. // 轮播图处理模块
  2. // 导入数据
  4. // import imgArr from './data.js'  //匿名导出
  5. // import {arr} from './data.js'
  7. import imgArr from './data.js'  //匿名导出
  9. // imgArr 只在当前模块中使用，不用导出到HTML页面
  10. // export {imgArr}
  12. /**
  13.  * 轮播图至少需要4个函数
  14.  * 1. 创建图片组：createImgs()
  15.  * 2. 创建按钮组：createBtns()
  16.  * 3. 创建按钮事件：switchImg()
  17.  * 4. 定时轮播（定时器）：timePlay()
  18.  */
  20. // ? 1. 创建图片组：createImgs()
  21. // imgs: 图片容器
  22. function createImgs(imgs) {
  23.     // console.log('图片创建成功');
  24.     // 生成一个文档片段
  25.     const frag = new DocumentFragment()
  27.     for (let i = 0; i < imgArr.length; i++) {
  28.         // 1. 创建图片
  29.         const img = document.createElement('img')
  31.         // 2. 为图片添加属性
  32.         // data-key
  33.         img.dataset.key = imgArr[i].key
  34.         img.src = imgArr[i].src
  35.         // 默认显示第一张
  36.         if (i === 0) img.classList.add('active')
  38.         // 3. 为图片添加事件，点击之后跳转到哪里？
  39.         img.onclick = function () {
  40.             location.href = imgArr[i].url
  41.         }
  43.         // 4. 添加到片段上
  44.         frag.append(img)
  46.     }
  47.     // 5. 将片段添加到图片容器中
  48.     imgs.append(frag)
  50. }
  54. // ===============================================================
  56. // ? 2. 创建按钮组：createBtns()
  57. // btns: 按钮容器
  58. function createBtns(imgs, btns) {
  59.     // 1. 获取到图片的数量
  60.     let length = imgs.childElementCount
  62.     // 2. 根据图片数量来生成对应的按钮
  63.     for (let i = 0; i < length; i++) {
  64.         // 创建按钮
  65.         const btn = document.createElement('span')
  66.         // 添加索引 data-key，必须与图片对应
  67.         btn.dataset.key = imgs.children[i].dataset.key
  68.         // 第一个默认高亮显示
  69.         if (i === 0) btn.classList.add('active')
  71.         // 添加到容器中
  72.         btns.append(btn)
  74.     }
  75. }
  79. // ===============================================================
  81. // ? 3. 创建按钮事件：switchImg()
  82. // btns: 按钮容器
  83. // imgs: 图片容器
  84. function switchImg(btn, imgs) {
  85.     // 1. 去掉按钮和图片的激活状态
  86.     ;[...imgs.children].forEach(img => img.classList.remove('active'))
  87.     ;[...btn.parentNode.children].forEach(btn => btn.classList.remove('active'))
  89.     // 2. 将当前的正在被用户点击的按钮激活
  90.     btn.classList.add('active')
  92.     // 3. 根据当前按钮的索引，找到对应的图片
  93.     // btn.data-key === img.data-key
  94.     const currImg = [...imgs.children].find(img => img.dataset.key === btn.dataset.key)
  96.     // 4. 将与当前按钮对应的图片显示出来
  97.     currImg.classList.add('active')
  98. }
  102. // ===============================================================
  104. // ? 4. 定时轮播（定时器）：timePlay()
  105. // btnArr: 按钮数组
  106. // btnKeys: 按钮健数组
  107. function timePlay(btnArr, btnKeys) {
  108.     // 定时器 + 事件派发
  109.     // setInterval() + dispatchEvent()
  111.     // 1. 从头部取一个
  112.     let key = btnKeys.shift()
  113.     // 2. 根据索引找到对应的按钮，再给它自动派发一个点击事件
  114.     btnArr[key].dispatchEvent(new Event('click'))
  115.     // 3. 将刚才取出的按钮，再放到尾部重新进入数组中，实现首尾相连
  116.     btnKeys.push(key)
  117. }
  121. // ===============================================================
  124. // 导出这4个函数
  125. export {createImgs, createBtns, switchImg, timePlay}
重点：
  1. 一、模块用到4个函数（JS模块）：
  2. // ? 1. 创建图片组：createImgs()
  3. // ? 2. 创建按钮组：createBtns()
  4. // ? 3. 创建按钮事件：switchImg()
  5. // ? 4. 定时轮播（定时器）：timePlay()
  7. 二、一个图片数组（JS模块）
  9. 三、HTML２个容器：
  10. // 1、图片组
  11. // 2、按钮组
  13. 四、模块也是比较方便，代码简洁，容易理解，但是自己从零开始写就比较困难，需要多写多练。
效果图：

【本文由： 响水网页设计公司 http://www.1234xp.com/xiangshui.html 欢迎留下您的宝贵建议】
更多阅读