search

博客列表 >原生ES6 js module实现防淘宝轮播图 (附源码)

原生ES6 js module实现防淘宝轮播图 (附源码)

高空中的云
高空中的云原创
2022年11月20日 13:01:09535浏览

在样例的基础上添加了左右点击的按钮和事件

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>实战: 仿淘宝移动端轮播图-模块</title>
  8.     <link rel="stylesheet" href="static/css/slideshow.css" />
  9.   </head>
  10.   <body>
  11.     <div class="slideshow">
  12.       <!-- 1. 图片容器 -->
  13.       <div class="imgs"></div>
  15.       <!-- 2. 按钮容器 -->
  16.       <div class="btns"></div>
  18.       <!-- 3. 居中左右播放按钮 -->
  19.       <div class="midBtns"></div>
  20.     </div>
  22.     <script type="module">
  23.       // 1. 获取图片容器和按钮容器
  24.       const imgs = document.querySelector('.imgs');
  25.       const btns = document.querySelector('.btns');
  26.       const midBtns = document.querySelector('.midBtns');
  27.       // console.log(imgs, btns);
  29.       // 2. 导入轮播图模块
  30.       // (1) 创建图片组: createImgs()
  31.       // (2) 创建按钮组: createBtns()
  32.       // (3) 创建按钮事件: switchImg()
  33.       // (4) 定时器: timePlay()
  34.       import { createImgs, createBtns, switchImg, timePlay,createArrows,lrswitchImg } from './static/js/slideshow.js';
  36.       // 简化方案例, 使用一个对象来挂载所有导出成员(命名空间方式)
  37.       // import * as slideshow from './static/js/slideshow.js';
  39.       // 3. 加载成功将图片以及按钮渲染出来
  40.       window.onload = () => {
  41.         // (1) 创建图片组
  42.         createImgs(imgs);
  44.         // (2) 创建按钮组
  45.         createBtns(imgs, btns);
  47.         // 创建中间左右按钮
  48.         createArrows(midBtns);
  50.         // 事件委托不能滥用,将点击事件绑定到每一个按钮上
  52.         // (3) 创建按钮事件
  53.         [...btns.children].forEach(function (btn) {
  54.           btn.onclick = function () {
  55.             switchImg(this, imgs);
  56.           };
  57.         });
  59.         [...midBtns.children].forEach(function (btn){
  60.           btn.onclick = function (){
  61.             lrswitchImg(this,imgs,btns);
  62.           }
  63.         })
  64.         // [...btns.children].forEach(btn => (btn.onclick = () => switchImg(this, imgs)));
  66.         // (4) 定时器: timePlay()
  68.         // 0,1,2
  69.         // 1,2,0
  70.         // 2,0,1
  71.         // 0,1,2
  72.         // 必须首尾相连,才能实现循环重复播放
  74.         // 按钮数组,三个span
  75.         const btnArr = [...btns.children];
  76.         console.log(btnArr);
  77.         // 按钮索引的数组
  78.         const btnKeys = Object.keys(btns.children);
  79.         console.log(btnKeys);
  81.         setInterval(
  82.           function (btnArr, btnKeys) {
  83.             timePlay(btnArr, btnKeys);
  84.           },
  85.           2000,
  86.           btnArr,
  87.           btnKeys
  88.         );
  89.       };
  90.     </script>
  91.   </body>
  92. </html>
  1. body {
  2.   background-color: #eee;
  3. }
  4. .midBtns {
  5.   position: relative;
  6.   display: grid;
  7.   grid-template-columns: 1fr 1fr;
  8.   top: -220px;
  9.   padding: 0 10px;
  10. }
  11. .previous,
  12. .next {
  13.   width: 50px;
  14.   height: 50px;
  15.   background-size: contain;
  16.   background-repeat: no-repeat;
  17.   background-position: center;
  18. }
  19. .previous {
  20.   background-image: url('../images/left.png');
  21. }
  22. .next {
  23.   background-image: url('../images/right.png');
  24.   place-self: end;
  25. }
  27. /* 轮播图容器 */
  28. .slideshow {
  29.   width: 240px;
  30.   height: 360px;
  31. }
  33. /* 图片容器 */
  34. .slideshow .imgs {
  35.   width: inherit;
  36.   height: inherit;
  37. }
  39. /* 图片适应 */
  40. .slideshow img {
  41.   width: 100%;
  42.   height: 100%;
  43.   border-radius: 10px;
  45.   /* 默认全隐藏 */
  46.   display: none;
  47. }
  49. /* 设置图片的激活状态 */
  50. .slideshow img.active {
  51.   display: block;
  52. }
  54. .slideshow img:hover {
  55.   cursor: pointer;
  56. }
  58. /* ------ 按钮容器 ------- */
  60. /* 按钮容器 */
  61. .slideshow .btns {
  62.   display: flex;
  63.   place-content: center;
  65.   /* position: relative;
  66.   top: -40px; */
  68.   transform: translateY(-40px);
  69. }
  71. .slideshow .btns > span {
  72.   background-color: rgba(233, 233, 233, 0.5);
  73.   height: 16px;
  74.   width: 16px;
  75.   border-radius: 50%;
  76.   margin: 5px;
  77. }
  79. .slideshow .btns > span.active {
  80.   background-color: orangered;
  81. }
  83. .slideshow .btns > span:hover {
  84.   cursor: pointer;
  85. }
  1. // todo 轮播图模块
  3. // * 1. 图片组
  4. const imgArr = [
  5.   {
  6.     key: 1,
  7.     src: 'static/images/item1.jpeg',
  8.     url: 'https://php.cn',
  9.   },
  10.   {
  11.     key: 2,
  12.     src: 'static/images/item2.jpeg',
  13.     url: 'https://php.cn',
  14.   },
  15.   {
  16.     key: 3,
  17.     src: 'static/images/item3.jpeg',
  18.     url: 'https://php.cn',
  19.   },
  20. ];
  22. // * 2. 创建图片组
  23. function createImgs(imgs) {
  24.   // 图片资源比较大,所以建议用文档片断来做
  25.   const frag = new DocumentFragment();
  27.   for (let i = 0; i < imgArr.length; i++) {
  28.     // 1. 创建图片元素
  29.     // const img = document.createElement('img')
  30.     const img = new Image();
  32.     // 2. 添加属性
  33.     // src
  34.     img.src = imgArr[i].src;
  35.     // data-key
  36.     img.dataset.key = imgArr[i].key;
  37.     // class='active': 第一张
  38.     if (i === 0) img.classList.add('active');
  40.     // 3. 添加事件
  41.     img.onclick = () => (location.href = imgArr[i].url);
  43.     // 添加图片分二步: 第一步加到内存中的文档片断元素上, 第二步再加到图片容器上
  44.     // 4. 添加图片到片断中
  45.     frag.append(img);
  46.   }
  47.   // 5. 将片断添加到图片容器元素中
  48.   imgs.append(frag);
  49. }
  51. // * 3. 创建按钮组
  52. function createBtns(imgs, btns) {
  53.   // 计算出所有图片的数量,根据这个来创建相同数量的按钮
  54.   //   console.log(imgs.childElementCount);
  55.   let length = imgs.childElementCount;
  57.   for (let i = 0; i < length; i++) {
  58.     // 1. 生成按钮: <span>
  59.     const btn = document.createElement('span');
  61.     // 2. 按钮索引: data-key, 必须与图片索引一致
  62.     btn.dataset.key = imgs.children[i].dataset.key;
  64.     // 3. 第1个按钮处于激活状态
  65.     if (i === 0) btn.classList.add('active');
  67.     // 4. 添加到容器中
  68.     btns.append(btn);
  69.   }
  70. }
  72. // * 4. 按钮点击事件
  73. function switchImg(btn, imgs) {
  74.   // 1. 去掉图片和按钮的激活状态
  75.   [...btn.parentNode.children].forEach(btn => btn.classList.remove('active'));
  76.   [...imgs.children].forEach(img => img.classList.remove('active'));
  78.   // 2. 将当前的按钮处于激活状态
  79.   btn.classList.add('active');
  81.   // 3. 根据按钮索引,找到对应的图片
  82.   const currImg = [...imgs.children].find(function (img) {
  83.     return img.dataset.key == btn.dataset.key;
  84.   });
  86.   //   const currImg = [...imgs.children].find(img => img.dataset.key == btn.dataset.key);
  87.   //   console.log(currImg);
  89.   // 4. 将当前图片处于激活状态(显示出来)
  90.   currImg.classList.add('active');
  91. }
  93. // * 5. 定时播放
  94. function timePlay(btnArr, btnKeys) {
  95.   // 1. 头部取一个
  96.   let key = btnKeys.shift();
  98.   // 2. 根据索引找到对应的按钮,再给它自动派发一个点击事件
  99.   btnArr[key].dispatchEvent(new Event('click'));
  101.   // 3. 把刚才到出的按钮再从尾部进入,实现首尾相连
  102.   btnKeys.push(key);
  103. }
  105. // * 6. 创建中间的按钮
  106. function createArrows(midBtns){
  107.   const previous = document.createElement('span');
  108.   previous.classList.add('previous');
  109.   const next = document.createElement('span');
  110.   next.classList.add('next');
  111.   // 添加到容器中
  112.   midBtns.append(previous);
  113.   midBtns.append(next);
  114. }
  117. // * 7. 中间按钮(点击左右翻动轮播图)
  118. function lrswitchImg(btn,imgs,botbtns){
  119.   let length = imgs.childElementCount;
  120.   // 1. 获取当前active状态的图片和按钮
  121.   // const imgs = document.querySelectorAll('img');
  122.   // console.log(imgs);
  123.   const activeImg = [...imgs.children].find(function (img) {
  124.       // 去掉图片和按钮的激活状态
  125.     if(img.classList.contains('active')){
  126.       img.classList.remove('active');
  127.       return img;
  128.     }
  129.   })
  131.   ;[...botbtns.children].find(function (btn) {
  132.     // 去掉按钮的激活状态
  133.   if(btn.classList.contains('active')){
  134.     btn.classList.remove('active');
  135.   }
  136. })
  139.   let index = activeImg.dataset.key;
  140.   // 判断当前按钮是previous还是next,
  141.   // next:当前索引+1,如到最后一个,则返回第0个
  143.   if(btn.classList.contains('next')){
  144.     index++;
  145.     if(index > length){
  146.       index = 1;
  147.     }
  148.   }
  150.   // previous: 当前索引-1,如到第一个,则返回最后一个
  151.   if(btn.classList.contains('previous')){
  152.     if(index > 1){
  153.       index--;
  154.     }else{
  155.       index = length;
  156.     }
  157.   }
  158.   console.log(index);
  159.   // 将当前图片设为active
  160.    // 3. 根据按钮索引,找到对应的图片和底部按钮
  161.    const currImg = [...imgs.children].find(function (img) {
  162.     return img.dataset.key == index;
  163.   });
  164.   const currBtn = [...botbtns.children].find(function (btn) {
  165.     return btn.dataset.key == index;
  166.   });
  168.   //   const currImg = [...imgs.children].find(img => img.dataset.key == btn.dataset.key);
  169.   //   console.log(currImg);
  171.   // 4. 将当前图片处于激活状态(显示出来)
  172.   currImg.classList.add('active');
  173.   currBtn.classList.add('active');
  176. }
  179. export { createImgs, createBtns, switchImg, timePlay,createArrows,lrswitchImg};
上一条：JS实现购物车功能功能：全选、全不选，单选等。下一条：实例演示子类调用父类方法，一个类实现多接口，采用trait,非自动加载与自动加载，数据库连接及数据的添加
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多