简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Home
Article
Q&A
Course
Topic
Download
Game
Dictionary
Recent Updates

博客列表 >轮播图示例及购物车示例

轮播图示例及购物车示例

月缺
月缺原创
2021年10月07日 13:19:13935浏览

轮播图示例及购物车示例

轮播图

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. });

成品效果

购物车

```

上一条：CSS学习之定位、flex标签及grid标签下一条：JS结构赋值、dom增删改查基本使用
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多