Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 轮播图示例及购物车示例
Blogger Information
Blog 12
fans 0
comment 1
visits 12534
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
轮播图示例及购物车示例
月缺
Original
936 people have browsed it

轮播图示例及购物车示例

轮播图

html部分

  1. <div class="container">
  2.     <!-- 1. 图片组 -->
  3.     <div class="img-group"></div>
  5.     <!-- 2. 图片中下部的小按钮 -->
  6.     <div class="btn-group"></div>
  8.     <!-- 3. 翻页 -->
  9.     <div class="skip">
  10.         <a class="prev">&lt;</a>
  11.         <a class="next">&gt;</a>
  12.     </div>
  13. </div>

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: 1rem;
  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: #10d1f3;
  65. }
  66. /* 翻页按钮 */
  67. .container .skip a {
  68.   position: absolute;
  69.   width: 2.5rem;
  70.   height: 2.5rem;
  71.   line-height: 2.5rem;
  72.   border-radius: 50%;
  73.   text-align: center;
  74.   opacity: 0.3;
  75.   top: 9rem;
  76.   font-weight: lighter;
  78.   font-size: 2rem;
  79.   background-color: #787373;
  80. }
  81. .container .skip .prev {
  82.   left: 1rem;
  83. }
  84. .container .skip .next {
  85.   right: 1rem;
  86. }
  87. .container .skip *:hover {
  88.   opacity: 0.6;
  89.   color: #666;
  90. }

js部分

  1. class Swiper {
  2.   constructor(imgs, code, imgcode, btncode) {
  3.     this.imgs = imgs;
  4.     this.code = code;
  5.     this.imgcode = imgcode;
  6.     this.btncode = btncode;
  7.     this.next = null;
  8.     this.prev = null;
  9.     this.timer = null;
  10.     this.clickEvent = new Event("click");
  11.   }
  12.   init() {
  13.     this.next = document.querySelector(".skip .next");
  14.     this.prev = document.querySelector(".skip .prev");
  15.     this.next.addEventListener('click', ()=>this.nextImg());
  16.     this.prev.addEventListener('click', ()=>this.prevImg());
  17.     // 1. 生成轮播图所有图片
  18.     this.createImgs(this.imgcode, this.imgs.length);
  19.     // 2. 生成与轮播图数量对应的小按钮
  20.     this.createBtns(this.btncode, this.imgs.length);
  21.     this.autoPlay();
  22.     // 鼠标移入时停止自动播放,移出时启动自动播放
  23.     this.code.addEventListener("mouseover", ()=>this.stopPlay());
  24.     this.code.addEventListener("mouseout", ()=>this.autoPlay());
  25.   }
  26.   // 生成图片
  27.   createImgs(parent, length) {
  28.     // 正确的做法, 应该是将所有图片,先在内存中创建,然后再统一的插入到页面中, 这样就只需要渲染一次dom一次
  29.     // 文档片断元素
  30.     const frag = document.createDocumentFragment();
  32.     for (let i = 0; i < length; i++) {
  33.       const img = document.createElement("img");
  34.       img.src = this.imgs[i];
  35.       img.alt = `banner${i + 1}`;
  36.       // 为每一张图片添加一个自定义属性"data-index", 用它与小按钮进行绑定
  37.       img.dataset.index = `${i + 1}`;
  38.       if (i === 0) img.classList.add("active");
  39.       // 内存中执行了四次
  40.       frag.append(img);
  41.     }
  42.     // 页面中只渲染了一次,效率杠杠的
  43.     parent.append(frag);
  44.   }
  45.   // 生成按钮
  46.   createBtns(parent, length) {
  47.     const frag = document.createDocumentFragment();
  48.     for (let i = 0; i < length; i++) {
  49.       const span = document.createElement("span");
  50.       span.dataset.index = `${i + 1}`;
  51.       if (i === 0) span.classList.add("active");
  52.       // 给新生成的按钮,添加点击事件,用来切换图片
  53.       span.onclick = ev => this.showImgs(ev);
  54.       frag.append(span);
  55.     }
  56.     parent.append(frag);
  57.   }
  58.   // 按钮事件
  59.   showImgs(ev) {
  60.     // 1. 获取所有图片和按钮
  61.     const imgArr = this.imgcode.querySelectorAll("img");
  62.     const btnArr = this.btncode.querySelectorAll("span");
  64.     // 2. 因为我们要根据用户的点击确定当前应该显示哪一个,所以应该将之前的激活全部取消掉
  65.     // 但是我们又不知道当前是哪个处于激活状态, 全部过一遍
  66.     //   btnArr.forEach(item => {
  67.     //     if (item.classList.contains("active")) item.classList.remove("active");
  68.     //   });
  69.     //   imgArr.forEach(item => {
  70.     //     if (item.classList.contains("active")) item.classList.remove("active");
  71.     //   });
  72.     // 将上面二段代码合并
  73.     [btnArr, imgArr].forEach(items => {
  74.       items.forEach(item => {
  75.         if (item.classList.contains("active")) item.classList.remove("active");
  76.       });
  78.       // 3. 再给当前正在点击的按钮添加激活,然后再根据当前激活的按钮确定应该显示哪一张图片
  79.       ev.target.classList.add("active");
  80.       imgArr.forEach(img => {
  81.         // 这张应该显示的图片的data-index应该与按钮 的data-index相等,就显示出来
  82.         if (ev.target.dataset.index === img.dataset.index) img.classList.add("active");
  83.       });
  84.     });
  85.   }
  86.   // 翻页事件
  87.   // 向前翻页
  88.   prevImg() {
  89.     //1. 当前图片和当前的按钮
  90.     const currentImg = this.imgcode.querySelector("img.active");
  91.     const currentBtn = this.btncode.querySelector("span.active");
  93.     // 2. 去掉当前图片和按钮的激活样式
  94.     currentImg.classList.remove("active");
  95.     currentBtn.classList.remove("active");
  97.     // 3. 获取当前图片和按钮的前一个兄弟元素
  98.     const prevImg = currentImg.previousElementSibling;
  99.     const prevBtn = currentBtn.previousElementSibling;
  101.     // 4. 判断,如果存在前一张图片,就设置为激活
  102.     if (prevImg !== null && prevBtn !== null) {
  103.       prevImg.classList.add("active");
  104.       prevBtn.classList.add("active");
  105.     } else {
  106.       //   将最后一个图片设置为激活显示,实现循环显示
  107.       this.imgcode.lastElementChild.classList.add("active");
  108.       this.btncode.lastElementChild.classList.add("active");
  109.     }
  110.   }
  111.   // 向后翻页
  112.   nextImg() {
  113.     //1. 当前图片和当前的按钮
  114.     const currentImg = this.imgcode.querySelector("img.active");
  115.     const currentBtn = this.btncode.querySelector("span.active");
  117.     // 2. 去掉当前图片和按钮的激活样式
  118.     currentImg.classList.remove("active");
  119.     currentBtn.classList.remove("active");
  121.     // 3. 获取当前图片和按钮的前一个兄弟元素
  122.     const nextImg = currentImg.nextElementSibling;
  123.     const nextBtn = currentBtn.nextElementSibling;
  125.     // 4. 判断,如果存在前一张图片,就设置为激活
  126.     if (nextImg !== null && nextBtn !== null) {
  127.       nextImg.classList.add("active");
  128.       nextBtn.classList.add("active");
  129.     } else {
  130.       //   将最后一个图片设置为激活显示,实现循环显示
  131.       this.imgcode.firstElementChild.classList.add("active");
  132.       this.btncode.firstElementChild.classList.add("active");
  133.     }
  134.   }
  135.   // 自动播放
  136.   autoPlay() {
  137.     const self = this;
  138.     // ev: 事件对象,在方法总是有效的
  139.     this.timer = setInterval(() => {
  140.       // console.log(this.next);
  141.       this.next.dispatchEvent(this.clickEvent, self.nextImg);
  142.     }, 2000);
  143.   }
  144.   // 自动停止
  145.   stopPlay() {
  146.     clearInterval(this.timer);
  147.   }
  148. }
  150. const imgs = ["images/banner_1.jpg", "images/banner_2.jpg", "images/banner_3.jpg", "images/banner_4.jpg"];
  151. const container = document.querySelector(".container");
  152. // 图片组
  153. const imgGroup = document.querySelector(".container > .img-group");
  154. // 按钮组
  155. const btnGroup = document.querySelector(".container > .btn-group");
  157. // 提供4个参数： 图片数组、轮播图盒子节点元素、图片组盒子节点元素、轮播图底部按钮节点
  158. const swiper = new Swiper(imgs, container, imgGroup, btnGroup);
  159. window.onload = () => swiper.init();

成品效果

轮播图

购物车

html部分

  1. <table>
  2.       <caption>
  3.         我的购物车
  4.       </caption>
  5.       <thead>
  6.         <th><input type="checkbox" name="checkAll" id="check-all" checked /><label for="check-all">全选</label></th>
  7.         <th>图片</th>
  8.         <th>品名</th>
  9.         <th>单位</th>
  10.         <th>单价/元</th>
  11.         <th>数量</th>
  12.         <th>金额/元</th>
  13.       </thead>
  15.       <tbody>
  16.         <tr>
  17.           <td>
  18.             <input type="checkbox" name="item" class="item" value="SN-1020" checked />
  19.           </td>
  20.           <td>
  21.             <a href=""><img src="images/p1.png" alt="" /></a>
  22.           </td>
  23.           <td>JavaScript权威指南(第七版)</td>
  24.           <td>本</td>
  25.           <td class="price">100</td>
  26.           <td><input type="number" min="1" value="1" /></td>
  27.           <td class="amount">0</td>
  28.         </tr>
  29.         <tr>
  30.           <td>
  31.             <input type="checkbox" name="item" class="item" value="SN-1020" checked />
  32.           </td>
  33.           <td>
  34.             <a href=""><img src="images/p2.png" alt="" /></a>
  35.           </td>
  36.           <td>JavaScript高级程序设计(第四版)</td>
  37.           <td>本</td>
  38.           <td class="price">129</td>
  39.           <td><input type="number" min="1" value="1" /></td>
  40.           <td class="amount">0</td>
  41.         </tr>
  42.         <tr>
  43.           <td>
  44.             <input type="checkbox" name="item" class="item" value="SN-1030" checked />
  45.           </td>
  46.           <td>
  47.             <a href=""><img src="images/p3.png" alt="" /></a>
  48.           </td>
  49.           <td>JavaScript忍者秘籍(第二版)</td>
  50.           <td>台</td>
  51.           <td class="price">99</td>
  52.           <td><input type="number" min="1" value="1" /></td>
  53.           <td class="amount">0</td>
  54.         </tr>
  55.         <tr>
  56.           <td>
  57.             <input type="checkbox" name="item" class="item" value="SN-1040" checked />
  58.           </td>
  59.           <td>
  60.             <a href=""><img src="images/p4.png" alt="" /></a>
  61.           </td>
  62.           <td>ThinkPad X1 Carbon 2021</td>
  63.           <td>台</td>
  64.           <td class="price">12999</td>
  65.           <td><input type="number" min="1" value="1" /></td>
  66.           <td class="amount">0</td>
  67.         </tr>
  68.         <tr>
  69.           <td>
  70.             <input type="checkbox" name="item" class="item" value="SN-1050" checked />
  71.           </td>
  72.           <td>
  73.             <a href=""><img src="images/p5.png" alt="" /></a>
  74.           </td>
  75.           <td>MacBook Pro 16 10代i7 16G 512G</td>
  76.           <td>台</td>
  77.           <td class="price">23800</td>
  78.           <td><input type="number" min="1" value="1" /></td>
  79.           <td class="amount">0</td>
  80.         </tr>
  81.       </tbody>
  82.       <tfoot>
  83.         <tr>
  84.           <td colspan="5">总计:</td>
  85.           <td id="sum">0</td>
  86.           <td id="total-amount">0</td>
  87.         </tr>
  88.       </tfoot>
  89.     </table>

css部分

  1. * {
  2.   margin: 0;
  3.   padding: 0;
  4.   box-sizing: border-box;
  5. }
  6. html {
  7.   font-size: 10px;
  8. }
  9. box {
  10.   font-size: 1.6rem;
  11. }
  12. table {
  13.   border-collapse: collapse;
  14.   width: 90%;
  15.   text-align: center;
  16.   margin: 1rem auto;
  17.   color: #666;
  18. }
  20. table caption {
  21.   margin-bottom: 1rem;
  22.   font-size: 2rem;
  23. }
  25. table th,
  26. table td {
  27.   padding: 0.5rem;
  28.   font-weight: normal;
  29. }
  31. table thead tr:first-of-type {
  32.   background-color: rgb(26, 187, 187);
  33.   height: 3rem;
  34.   color: white;
  35. }
  36. table thead tr:first-of-type:hover {
  37.   opacity: 0.8;
  38.   cursor: pointer;
  39. }
  41. table input[type="checkbox"] {
  42.   width: 1rem;
  43.   height: 1rem;
  44. }
  46. /* table tr:nth-of-type(even) {
  47.   background-color: #eee;
  48. } */
  49. table tbody tr:hover {
  50.   background-color: lightcyan;
  51.   transition: 0.5s;
  52.   cursor: pointer;
  53. }
  55. table input[type="number"] {
  56.   height: 2em;
  57.   width: 4em;
  58.   border: none;
  59.   border-bottom: 1px solid;
  60.   outline: none;
  61.   text-align: center;
  62. }
  64. /* table input[type="number"]:focus {
  65.   background-color: rgb(26, 187, 187);
  66. } */
  68. tbody img {
  69.   width: 3em;
  70.   transition: all 0.6s;
  71.   cursor: pointer;
  72. }
  73. tbody img:hover {
  74.   transform: scale(4);
  75. }
  77. tfoot tr {
  78.   height: 3rem;
  79.   color: coral;
  80.   background-color: lightcyan;
  81. }
  83. button {
  84.   width: 15rem;
  85.   height: 2rem;
  86.   outline: none;
  87.   border: none;
  88.   background-color: rgb(26, 187, 187);
  89.   color: white;
  90.   letter-spacing: 5px;
  91. }
  92. button:hover {
  93.   background-color: coral;
  94.   transition: 0.2s;
  95.   cursor: pointer;
  96. }
  98. @media screen and (min-width: 400px) {
  99.   html {
  100.     font-size: 12px;
  101.   }
  102. }
  103. @media screen and (min-width: 600px) {
  104.   html {
  105.     font-size: 14px;
  106.   }
  107. }
  109. @media screen and (min-width: 800px) {
  110.   html {
  111.     font-size: 16px;
  112.   }
  113. }

js部分

  1. // 功能一: 完成全选和全不选功能
  2. // 1. 全选复选框
  3. const checkAll = document.querySelector("#check-all");
  4. // 2. 每个商品的复选框
  5. const checkItems = document.getElementsByName("item");
  7. // ==========================================================
  9. // 功能二: 自动计算
  11. // 分析: 所有的计算,都是基于"数量的变化", 第一步就要获取到所有商品数量控件
  12. const numInput = document.querySelectorAll('input[type="number"]');
  14. // 给每一个数量控件绑定一个change事件,进行监听它的变量
  15. // 当控件的值发生变化时, 自动进行重新 计算
  16. numInput.forEach(input => (input.onchange = autoTotal));
  18. // 当页面加载完成时,应该将自动计算函数执行一次(初始化)
  19. window.onload = autoCalculate;
  21. function autoCalculate() {
  22.   // 1. 获取每个商品的金额,  金额 = 数量 * 单价
  23.   // 数量, 当前有多个商品,所以应该返回一个由数量组成的集合/数组
  24.   const numbers = document.querySelectorAll('input[type="number"]');
  25.   //   console.log(numbers);
  26.   //   [...numbers].forEach(num => console.log(typeof parseInt(num.value)));
  27.   //   [...numbers].forEach(num => console.log(num.value * 1));
  28.   //map()代替forEach: 因为forEach()没有返回值,map()功能与forEach一样的,但是有一个数组返回值
  29.   const numArr = [...numbers].map(num => num.value * 1);
  31.   // 获取单价组成的数组
  32.   const prices = document.querySelectorAll("tbody .price");
  33.   //   console.log(prices);
  34.   const priceArr = [...prices].map(price => price.textContent * 1);
  35.   //   console.log(numArr, priceArr);
  37.   // 每一个商品与单价的乘积是它的金额,有多个商品,所以应该返回 一个由"金额"组成的数组
  38.   // reduce()
  39.   const amountArr = [priceArr, numArr].reduce((prev, curr) => prev.map((item, key) => item * curr[key]));
  40.   // console.log(amountArr);
  42.   // 2. 商品总数
  43.   let sum = numArr.reduce((prev, curr) => prev + curr);
  45.   // 3. 所有商品总金额
  46.   let total = amountArr.reduce((prev, curr) => prev + curr);
  48.   // 4. 将以上的计算结果,渲染到页面中
  49.   //   forEach(function(正在遍历的元素,该元素的索引,数组))
  50.   document.querySelectorAll(".amount").forEach((item, index) => (item.textContent = amountArr[index]));
  51.   document.querySelector("#sum").textContent = sum;
  52.   document.querySelector("#total-amount").textContent = total;
  53. }
  55. // 全选时
  56. checkAll.onchange = (ev) => {
  57.   checkItems.forEach(item => (item.checked = ev.target.checked));
  58.   if (!ev.target.checked) {
  59.     document.querySelector("#sum").textContent = 0;
  60.     document.querySelector("#total-amount").textContent = 0;
  61.   } else {
  62.     autoCalculate()
  63.   }
  64. }
  65. //  选择某个商品时, 数量,总金额实时更新
  66. function autoTotal() {
  67.   // 1. 获取每个商品的金额,  金额 = 数量 * 单价
  68.   // 数量, 当前有多个商品,所以应该返回一个由数量组成的集合/数组
  69.   const numbers = document.querySelectorAll('input[type="number"]');
  70.   const checkeds = [...checkItems].filter((item, idx) => {
  71.     if (item.checked) {
  72.       item.dataset.checkidx = idx;
  73.       return true;
  74.     }
  75.     return false;
  76.   }).map((item) => item.dataset.checkidx);
  78.   const numArr = [...numbers].filter((v, idx) => checkeds.includes(`${idx}`)).map(num => num.value * 1);
  79.   console.log([...numbers].filter((v, idx) => checkeds.includes(`${idx}`)));
  81.   // 获取单价组成的数组
  82.   const prices = document.querySelectorAll("tbody .price");
  83.   const priceArr = [...prices].filter((v, idx) => checkeds.includes(`${idx}`)).map(price => price.textContent * 1);
  84.   const amountArr = [priceArr, numArr].reduce((prev, curr) => prev.map((item, key) => item * curr[key]));
  86.   // 2. 商品总数
  87.   let sum = numArr.reduce((prev, curr) => prev + curr);
  89.   // 3. 所有商品总金额
  90.   let total = amountArr.reduce((prev, curr) => prev + curr);
  92.   // 4. 将以上的计算结果,渲染到页面中
  93.   document.querySelector("#sum").textContent = sum;
  94.   document.querySelector("#total-amount").textContent = total;
  95. }
  96. checkItems.forEach((item)=> item.onchange = ()=>{
  97.   // 全选复选框选中状态根据所有商品的复选框状态更改
  98.   checkAll.checked = [...checkItems].every(item => item.checked);
  99.   autoTotal();
  100. });

成品效果

购物车

```

Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：class是function的语法糖,封装的很不错
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