Community Learn Tools Library Leisure
search
English
Home > List of blog posts > js 仿淘宝移动端轮播图效果
Blogger Information
Blog 14
fans 0
comment 0
visits 7646
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
js 仿淘宝移动端轮播图效果
深巷的博客
Original
458 people have browsed it

js 仿淘宝移动端轮播图效果

HTML

  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>
  11.   <body>
  12.     <!-- 轮播图容器 -->
  13.     <div class="slideshow">
  14.       <!-- 图片容器 -->
  15.       <div class="imgs"></div>
  16.       <!-- 按钮容器 -->
  17.       <div class="btns"></div>
  18.     </div>
  20.     <!-- 模块化开发,添加type="module" -->
  21.     <script type="module">
  22.       //获取图片容器
  23.       const imgs = document.querySelector(".imgs");
  24.       //获取按钮容器
  25.       const btns = document.querySelector(".btns");
  27.       //导入模块
  28.       import {
  29.         createImgs,
  30.         createBtns,
  31.         switchImg,
  32.         timePlay,
  33.       } from "./static/js/slideshow.js";
  35.       //页面加载完成后的动作window.onload
  36.       window.onload = function () {
  37.         //执行模块的createImgs(创建图片组)
  38.         createImgs(imgs);
  39.         //执行模块的createBtns
  40.         createBtns(imgs, btns);
  42.         //创建按钮事件,点击按钮执行的动作（显示对应图片）
  43.         //将类数组转为真数组然后用forEach循环遍历
  44.         //forEach的参数是一个函数,函数中有三个参数分别是值(必选),索引,数组本身
  45.         /*[...btns.children].forEach(function (btn) {
  46.                 btn.onclick = function () {
  47.                     switchImg(this, imgs);
  48.                 };
  49.             });*/
  50.         Array.from(btns.children).forEach(function (btn) {
  51.           btn.onclick = function () {
  52.             //被点击时执行模块的switchImg
  53.             switchImg(this, imgs);
  54.           };
  55.         });
  57.         //添加定时器,实现图片轮播
  58.         //按钮数组
  59.         const btnArr = [...btns.children];
  60.         //按钮索引
  61.         const btnKeys = Object.keys(btns.children);
  62.         //console.log(btnKeys);
  63.         //定时器setInterval()
  64.         setInterval(play, 2000, btnArr, btnKeys);
  66.         function play(btnArr, btnKeys) {
  67.           //执行模块的timePlay
  68.           timePlay(btnArr, btnKeys);
  69.         }
  70.       };
  71.     </script>
  72.   </body>
  73. </html>

JavaScript

  1. // 轮播图模块
  3. //图片组数据
  4. const imgArr = [
  5.   {
  6.     key: 1,
  7.     src: "static/images/item1.jpeg",
  8.     url: "http://php.cn",
  9.   },
  10.   {
  11.     key: 2,
  12.     src: "static/images/item2.jpeg",
  13.     url: "http://php.cn",
  14.   },
  15.   {
  16.     key: 3,
  17.     src: "static/images/item3.jpeg",
  18.     url: "http://php.cn",
  19.   },
  20. ];
  22. //创建图片组
  23. function createImgs(imgs) {
  24.   //图片资源较大，用文档片段来做
  25.   const frag = new DocumentFragment();
  27.   //for循环获取imgArr全部图片资源
  28.   for (let i = 0; i < imgArr.length; i++) {
  29.     // 创建图片元素
  30.     const img = new Image();
  31.     //添加img的src
  32.     img.src = imgArr[i].src;
  33.     //添加自定义属性data-key
  34.     img.dataset.key = imgArr[i].key;
  35.     //第一张图片添加class='active'
  36.     if (i === 0) img.classList.add("active");
  37.     //添加图片点击事件
  38.     img.onclick = function () {
  39.       location.href = imgArr[i].url;
  40.     };
  41.     //img.onclick = () => (location.href = imgArr[i].url);
  43.     //将图片添加到临时文档片段frag
  44.     frag.append(img);
  45.   }
  46.   //将文档片段添加到图片容器imgs
  47.   imgs.append(frag);
  48. }
  50. //创建按钮组,按钮数量根据图片数量得来
  51. function createBtns(imgs, btns) {
  52.   //获取图片容器中的图片数量childElementCount
  53.   const length = imgs.childElementCount;
  54.   for (let i = 0; i < length; i++) {
  55.     //创建按钮元素span
  56.     const btn = document.createElement("span");
  57.     //添加自定义元素data-key
  58.     btn.dataset.key = imgs.children[i].dataset.key;
  59.     //第一个按钮添加class='active'
  60.     if (i === 0) btn.classList.add("active");
  61.     //将按钮元素添加到按钮容器btns
  62.     btns.append(btn);
  63.   }
  64. }
  66. //按钮点击事件
  67. function switchImg(btn, imgs) {
  68.   //按钮被点击时去除默认的激活状态class='active'
  69.   //由于激活状态的按钮并不是固定的,所以进行遍历去除
  70.   Array.from(btn.parentNode.children).forEach(function (btn) {
  71.     btn.classList.remove("active");
  72.   });
  73.   /*[...btn.parentNode.children].forEach(function(btn){
  74.         btn.classList.remove('active');
  75.     });*/
  76.   /*[...btn.parentElement.children].forEach(function(btn){
  77.         btn.classList.remove('active');
  78.     });*/
  79.   [...imgs.children].forEach(function (img) {
  80.     img.classList.remove("active");
  81.   });
  83.   //修改当前按钮处于激活状态,添加class='active'
  84.   btn.classList.add("active");
  86.   //查找索引与当前按钮索引一致的图片元素
  87.   const currImg = [...imgs.children].find(function (img) {
  88.     return img.dataset.key == btn.dataset.key;
  89.   });
  90.   //修改图片元素处于激活状态
  91.   currImg.classList.add("active");
  92. }
  94. //定时播放
  95. //将按钮索引从第一个开始 取出、进行点击事件、添加到尾部实现首尾相连循环播放
  96. // 0,1,2
  97. // 1,2,0
  98. // 2,0,1
  99. // 0,1,2
  100. function timePlay(btnArr, btnKeys) {
  101.   //shift()删除数组中的第一个元素并返回该值
  102.   let key = btnKeys.shift();
  103.   //dispatchEvent()对取出值按钮进行点击事件
  104.   btnArr[key].dispatchEvent(new Event("click"));
  105.   //push()将该取出值添加到数组尾部
  106.   btnKeys.push(key);
  107. }
  109. //导出
  110. export { createImgs, createBtns, switchImg, timePlay };

CSS

  1. /* 添加背景色 */
  2. body {
  3.   background-color: #eee;
  4. }
  6. /* 轮播图容器 */
  7. .slideshow {
  8.   width: 240px;
  9.   height: 360px;
  10. }
  12. /* 图片容器 */
  13. .slideshow .imgs {
  14.   /* inherit父元素的值 */
  15.   width: inherit;
  16.   height: inherit;
  17. }
  19. /* 图片适应 */
  20. .slideshow img {
  21.   width: 100%;
  22.   height: 100%;
  23.   /* border-radius设置圆角 */
  24.   border-radius: 10px;
  25.   /* 图片默认状态-隐藏 */
  26.   display: none;
  27. }
  29. /* 图片激活状态 */
  30. .slideshow img.active {
  31.   display: block;
  32. }
  34. /* 鼠标悬停图片时小手样式 */
  35. .slideshow img:hover {
  36.   cursor: pointer;
  37. }
  39. /* 按钮容器 */
  40. .slideshow .btns {
  41.   /* flex布局 */
  42.   display: flex;
  43.   /* 居中 */
  44.   place-content: center;
  45.   /* transform 属性允许你旋转，缩放，倾斜或平移给定元素。 */
  46.   transform: translateY(-40px);
  47. }
  49. .slideshow .btns > span {
  50.   /* rgba(,,,,)颜色和透明度 */
  51.   background-color: rgba(233, 233, 233, 0.5);
  52.   height: 16px;
  53.   width: 16px;
  54.   /* 按钮圆形 */
  55.   border-radius: 50%;
  56.   /* 按钮间距 */
  57.   margin: 5px;
  58. }
  59. .slideshow .btns > span.active {
  60.   background-color: orangered;
  61. }
  62. .slideshow .btns > span:hover {
  63.   cursor: pointer;
  64. }

效果图

仿淘宝移动端轮播图效果

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