Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 轮播图自动播放、购物车选择时自动计算功能
Blogger Information
Blog 16
fans 0
comment 0
visits 16177
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
轮播图自动播放、购物车选择时自动计算功能
Leo的博客
Original
493 people have browsed it

轮播图自动播放

  1.  <div class="container">
  2.       <div class="img-group"></div>
  4.       <!-- 2. 和图片数量对应的小按钮 -->
  5.       <div class="btn-group"></div>
  7.       <!-- 3. 向前和向后的翻页按钮 -->
  8.       <div class="skip">
  9.         <a class="prev" href="" onclick="prevImg(event)">&lt;</a>
  10.         <a class="next" href="" onclick="nextImg(event)">&gt;</a>
  11.       </div>
  12.     </div>
  14.     <ul class="list"></ul>

加入入css效果

  1. /* 初始化 */
  2. * {
  3.   margin: 0;
  4.   padding: 0;
  5.   box-sizing: border-box;
  6. }
  7. a {
  8.   text-decoration: none;
  9. }
  11. /* 轮播图的容器 */
  12. .container {
  13.   width: 62.5em;
  14.   height: 22em;
  16.   margin: 1em auto;
  17.   /* 转为定位元素/定位父级 */
  18.   position: relative;
  19. }
  20. .container:hover {
  21.   cursor: pointer;
  22. }
  23. /* 图片组 */
  24. .container > .img-group img {
  25.   width: 100%;
  26.   height: 100%;
  27.   border-radius: 0.6em;
  29.   /* 默认全部隐藏 */
  30.   display: none;
  32.   /* 将所有的图片进行绝对定位，确保每一次只看到一张,所有图片共享这个容器 */
  33.   position: absolute;
  34.   left: 0;
  35.   top: 0;
  36. }
  38. /* 设置默认显示的图片(第一张) */
  39. .container > .img-group img.active {
  40.   display: block;
  41. }
  43. /* 按钮组(独立按钮) */
  44. .container > .btn-group {
  45.   position: absolute;
  46.   left: 0;
  47.   right: 0;
  48.   bottom: 0;
  49.   /* 水平居中 */
  50.   text-align: center;
  51. }
  52. .container > .btn-group span {
  53.   /* 转成行内块元素: 即能水平排列,双支持宽度设置 */
  54.   display: inline-block;
  55.   padding: 0.5em;
  56.   margin: 0 0.2em;
  57.   background-color: #fff;
  58.   border-radius: 50%;
  59. }
  60. .container > .btn-group span:hover {
  61.   cursor: pointer;
  62. }
  63. .container > .btn-group .active {
  64.   background-color: #000;
  65. }
  66. /* 翻页按钮 */
  67. .container .skip a {
  68.   position: absolute;
  69.   width: 2.5rem;
  70.   height: 5rem;
  71.   line-height: 5rem;
  72.   text-align: center;
  73.   opacity: 0.3;
  74.   top: 9rem;
  75.   font-weight: lighter;
  77.   font-size: 2rem;
  78.   background-color: #ccc;
  79. }
  80. .container .skip .prev {
  81.   left: 0;
  82. }
  83. .container .skip .next {
  84.   right: 0;
  85. }
  86. .container .skip *:hover {
  87.   opacity: 0.6;
  88.   color: #666;
  89. }
  1.     <script>
  2.       // 文档片断
  3.       //   const ul = document.querySelector(".list");
  5.       //   // 文档片断 ，就是临时的父节点
  6.       //   const frag = document.createDocumentFragment();
  8.       //   for (let i = 0; i < 100; i++) {
  9.       //     const li = document.createElement("li");
  10.       //     li.textContent = "item" + (i + 1);
  11.       //     // 这个添加操作，是在内存中进行，与页面无关
  12.       //     frag.append(li);
  13.       //   }
  14.       //   ul.append(frag);
  16.       const banners = [
  17.         "imges2/1banner.jpg",
  18.         "imges2/2banner.jpg",
  19.         "imges2/3banner.jpg",
  20.         "imges2/4banner.jpg",
  21.       ];
  22.       //    图片组元素
  23.       const imgGroup = document.querySelector(".container > .img-group");
  24.       // 按钮组
  25.       const btnGroup = document.querySelector(".container > .btn-group");
  26.       // 当页面加载成功，将所有图片和与图片对应的小按钮全部渲染出来
  27.       window.onload = () => {
  28.         // 1. 生成所有图片
  29.         createImgs(imgGroup, banners.length);
  30.         // 2. 生成与图片对应的小按钮
  31.         createBtns(btnGroup, banners.length);
  32.       };

生成图片

  1.       // 生成图片
  2.       function createImgs(parent, length) {
  3.         const frag = document.createDocumentFragment();
  4.         for (let i = 0; i < length; i++) {
  5.           const img = document.createElement("img");
  6.           img.src = banners[i];
  7.           // 为每一张图片添加一个索引: data-index，它与对应的小按钮一一对应
  8.           img.dataset.index = `${i + 1}`;
  9.           if (i === 0) img.classList.add("active");
  10.           // 使用文档片断，在内存中添加
  11.           frag.append(img);
  12.         }
  13.         parent.append(frag);
  14.       }
  16.       // 生成按钮
  17.       function createBtns(parent, length) {
  18.         const frag = document.createDocumentFragment();
  19.         for (let i = 0; i < length; i++) {
  20.           const span = document.createElement("span");
  21.           // 为每一张图片添加一个索引: data-index，它与对应的小按钮一一对应
  22.           span.dataset.index = `${i + 1}`;
  23.           if (i === 0) span.classList.add("active");
  24.           // 为新生成按钮添加点击事件
  25.           span.onclick = showImgs;
  26.           // 使用文档片断，在内存中添加
  27.           frag.append(span);
  28.         }
  29.         parent.append(frag);
  30.       }
  32.       // parent.append(frag);
  34.       //   为这个按钮的showImgs创建函数
  35.       function showImgs(ev) {
  36.         // 1. 获取所有图片和按钮
  37.         const imgArr = imgGroup.querySelectorAll("img");
  38.         const btnArr = btnGroup.querySelectorAll("span");
  39.         console.log(imgArr, btnArr);
  40.         // 2. 根据按钮激活状态设置对应的图片显示
  41.         btnArr.forEach((btn) => btn.classList.remove("active"));
  42.         ev.target.classList.add("active");
  43.         imgArr.forEach((img) => img.classList.remove("active"));
  45.         // 3. 根据按钮与图片的data-index属性的值，匹配上再激活
  46.         imgArr.forEach((img) => {
  47.           if (ev.target.dataset.index === img.dataset.index)
  48.             img.classList.add("active");
  49.         });
  50.       }
  52.       // 翻页
  53.       // 向前
  54.       function prevImg(ev) {
  55.         //   禁用<a>标签默认跳转行为，当按钮用
  56.         ev.preventDefault();
  57.         // 1. 当前图片和当前的按钮
  58.         const currentImg = imgGroup.querySelector("img.active");
  59.         const currentBtn = btnGroup.querySelector("span.active");
  60.         console.log(currentImg, currentBtn);
  62.         // 2. 取消当前图片和当前的按钮激活状态
  63.         currentImg.classList.remove("active");
  64.         currentBtn.classList.remove("active");
  66.         // 3. 取到当前图片和按钮的前一个兄弟节点
  67.         const prevImg = currentImg.previousElementSibling;
  68.         const prevBtn = currentBtn.previousElementSibling;
  70.         // 4. 如果存在前一个兄弟，就设置它为激活并显示出来
  71.         if (prevImg !== null && prevBtn !== null) {
  72.           prevBtn.classList.add("active");
  73.           prevImg.classList.add("active");
  74.         } else {
  75.           imgGroup.lastElementChild.classList.add("active");
  76.           btnGroup.lastElementChild.classList.add("active");
  77.         }
  78.       }
  80.       // 向后
  81.       function nextImg(ev) {
  82.         //   禁用<a>标签默认跳转行为，当按钮用
  83.         ev.preventDefault();
  84.         // 1. 当前图片和当前的按钮
  85.         const currentImg = imgGroup.querySelector("img.active");
  86.         const currentBtn = btnGroup.querySelector("span.active");
  87.         console.log(currentImg, currentBtn);
  89.         // 2. 取消当前图片和当前的按钮激活状态
  90.         currentImg.classList.remove("active");
  91.         currentBtn.classList.remove("active");
  93.         // 3. 取到当前图片和按钮的前一个兄弟节点
  94.         const nextImg = currentImg.nextElementSibling;
  95.         const nextBtn = currentBtn.nextElementSibling;
  97.         // 4. 如果存在前一个兄弟，就设置它为激活并显示出来
  98.         if (nextImg !== null && nextBtn !== null) {
  99.           nextBtn.classList.add("active");
  100.           nextImg.classList.add("active");
  101.         } else {
  102.           imgGroup.firstElementChild.classList.add("active");
  103.           btnGroup.firstElementChild.classList.add("active");
  104.         }
  105.       }

作业：每2s自送切换到下一个，使用setInterval 执行间歇事件

  1.       setInterval(() => {
  2.         //1、当前图片和当前按钮
  3.         const currentImg = imgGroup.querySelector("img.active");
  4.         const currentBtn = btnGroup.querySelector("span.active");
  5.         //2、取消当前图片和当前按钮的激活状态
  6.         currentImg.classList.remove("active");
  7.         currentBtn.classList.remove("active");
  8.         //3、取得当前图片和按钮的前一个兄弟节点
  9.         const nextImg = currentImg.nextElementSibling;
  10.         const nextBtn = currentBtn.nextElementSibling;
  11.         //
  12.         //4、如果存在前一个兄弟，就设置它为激活状态
  13.         if (nextImg !== null && nextBtn !== null) {
  14.           nextBtn.classList.add("active");
  15.           nextImg.classList.add("active");
  16.         } else {
  17.           imgGroup.firstElementChild.classList.add("active");
  18.           btnGroup.firstElementChild.classList.add("active");
  19.         }
  20.       }, 2000);

购物车选择自动计算功能

全选复选框

  1. const checkAll = document.querySelector("#check-all");
  2. const checkItems = document.getElementsByName("item");
  4. // change: 当控件中的值发生变化时触发
  5. // 将全选按钮的状态，赋值给下面所有的商品的checkbox
  6. checkAll.onchange = function (ev) {
  7.   checkItems.forEach(function (item) {
  8.     item.checked = ev.target.checked;
  9.   });
  10. };
  12. checkItems.forEach(function (item) {
  13.   // onchange监测它的状态
  14.   item.onchange = function () {
  15.     //只有全部选中才更新全选按钮的状态
  16.     checkAll.checked = [...checkItems].every(function (item) {
  17.       return item.checked;
  18.     });
  19.   };
  20. });
  21. // 一个点掉就会取消全选,全部点上全选就会自动选上

自动计算
所有的计算，都是基于数量的变化

  1. const numInput = document.querySelectorAll('input[type="number"]');
  3. numInput.forEach(function (input) {
  4.   input.onchange = autoCalculate;
  5. });
  7. function autoCalculate() {
  8.   // 1. 获取每个商品的金额： 数量 * 单价
  9.   const numbers = document.querySelectorAll('input[type="number"]');
  10.   const numArr = [...numbers].map(function (num) {
  11.     return num.value * 1;
  12.   });
  14.   const prices = document.querySelectorAll("tbody .price");
  15.   const priceArr = [...prices].map(function (num) {
  16.     return num.textContent * 1;
  17.   });
  19.   // 2. 计算出每个商品的金额(数组)
  20.   const amountArr = [priceArr, numArr].reduce(function (prev, curr) {
  21.     return prev.map(function (item, key) {
  22.       return item * curr[key];
  23.     });
  24.   });
  25.   console.log(amountArr);

总金额

  1.   let total = amountArr.reduce(function (prev, curr) {
  2.     return prev + curr;
  3.   });

总数量

  1.   let sum = numArr.reduce(function (prev, curr) {
  2.     return prev + curr;
  3.   });
  5.   let total = amountArr.reduce(function (prev, curr, index) {
  6.     if (index == 1) {
  7.       if (!checkItems[0].checked) prev = 0;
  8.     }
  9.     if (checkItems[index].checked) {
  10.       return prev + curr;
  11.     } else {
  12.       return prev;
  13.     }
  14.   });

选择去掉商品自动计算
第一和第二句checkAll.onchange里加上一个autoCalculate()即7和13行。

最后一句在计算的函数里，添加一条判断语句，判断前面的check如果没勾上，就不纳入计算（下列代码的24行）

  1. // change: 当控件中的值发生变化时触发
  2. // 将全选按钮的状态，赋值给下面所有的商品的checkbox
  3. checkAll.onchange = function (ev) {
  4.   checkItems.forEach(function (item) {
  5.     item.checked = ev.target.checked;
  6.   });
  7.  // autoCalculate();
  8. };
  10. checkItems.forEach(function (item) {
  11.   // onchange监测它的状态
  12.   item.onchange = function (ev) {
  13.     //autoCalculate();
  14.     //只有全部选中才更新全选按钮的状态
  15.     checkAll.checked = [...checkItems].every(function (item) {
  16.       return item.checked;
  17.     });
  18.   };
  19. });
  21.  // 1. 获取每个商品的金额： 数量 * 单价
  22.   const numbers = document.querySelectorAll('input[type="number"]');
  23.   const numArr = [...numbers].map(function (num) {
  24.     //if (!num.parentNode.parentNode.getElementsByClassName("item")[0].checked)
  25.       return 0;
  26.     return num.value * 1;
  27.   });

将所有数据渲染到页面中

  1.   document.querySelectorAll(".amount").forEach(function (item, index) {
  2.     item.textContent = amountArr[index];
  3.   });
  4.   document.querySelector("#total-amount").textContent = total;
  5.   document.querySelector("#sum").textContent = sum;
  6. }
  8. window.onload = autoCalculate;
Correcting teacher：PHPzPHPz

Correction status：qualified

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post