登录  /  注册
博主信息
博文 94
粉丝 0
评论 0
访问量 44718
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
【JS】模块布局实战:仿淘宝移动端轮播图
可乐随笔
原创
359人浏览过

模块布局实战:仿淘宝移动端轮播图

总结:

1.图片容器和按钮容器布局,获取这两个元素
2.导入模块,创建图片列表
3.根据图片数据,利用模块创建按钮
4.创建按钮事件,注意要将事件绑定到每个按钮
5.创建定时器,实现图片自动轮播功能

1.HTML实例:

  1. <!DOCTYPE html>
  2. <html lang="en">
  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>
  14. <!-- 2.按钮容器 -->
  15. <div class="btns"></div>
  16. </div>
  17. <script type="module">
  18. // 1.获取图片容器和按钮容器
  19. const imgs = document.querySelector('.imgs');
  20. const btns = document.querySelector('.btns');
  21. // console.log(imgs,btns);
  22. // 2.导入轮播图模块
  23. // (1).创建图片组:createImgs();
  24. // (2).创建按钮组:createBtns();
  25. // (3).创建按钮事件:switchImg();
  26. // (4).定时器:timePlay();
  27. // import {
  28. // createImgs,
  29. // createBtns,
  30. // switchImg,
  31. // timePlay,
  32. // } from './static/js/slideshow.js';
  33. //使用一个对象来挂载所有导出的模块
  34. import * as slideshow from './static/js/slideshow.js';
  35. // 3.当加载成功将图片和按钮渲染出来
  36. window.onload = () => {
  37. // (1).创建图片组:
  38. slideshow.createImgs(imgs);
  39. // (2).创建按钮组,值参:imgs确定创建多个少按钮,btns表示在什么位置
  40. slideshow.createBtns(imgs, btns);
  41. // (3).创建按钮事件方法
  42. // 这里不能用事件委托,应该将点击事件绑室每一个按钮上
  43. //拿到按钮数组,将事件添加到子元素中
  44. [...btns.children].forEach(function (btn) {
  45. //绑定每个按钮的点击事件
  46. btn.onclick = function () {
  47. //执行图片切换,this:当前按钮高亮;imgs:图片组进行查询选择显示那个
  48. slideshow.switchImg(this, imgs);
  49. };
  50. });
  51. // (4).定时器:timePlay
  52. // 0,1,2
  53. // 1,2,0
  54. // 2,0,1
  55. //必须首尾相连,才能实现循环播放
  56. // 按钮数组,三个span
  57. const btnArr = [...btns.children];
  58. // 拿到索引数组
  59. const btnKeys = Object.keys(btns.children);
  60. setInterval(
  61. (btnArr, btnKeys) => {
  62. slideshow.timePlay(btnArr, btnKeys);
  63. },
  64. 2000,
  65. btnArr,
  66. btnKeys
  67. );
  68. };
  69. </script>
  70. </body>
  71. </html>

2.JS示范

  1. // todo 轮播图模块
  2. // * 0.图片组
  3. const imgArr = [
  4. {
  5. key: 1,
  6. src: "static/img/item1.jpeg",
  7. url: "https://php.cn"
  8. },
  9. {
  10. key: 2,
  11. src: "static/img/item2.jpeg",
  12. url: "https://php.cn"
  13. },
  14. {
  15. key: 3,
  16. src: "static/img/item3.jpeg",
  17. url: "https://php.cn"
  18. },
  19. ];
  20. // * 1.创建图片组
  21. function createImgs(imgs) {
  22. //图片资源比较大,所以建议用文档片段来做
  23. const frag = new DocumentFragment();
  24. for (let i = 0; i < imgArr.length; i++) {
  25. // 1.创建图片元素
  26. // const img = document.createElement('img');
  27. const img = new Image();
  28. // 2.添加属性
  29. img.src = imgArr[i].src;
  30. img.dataset.key = imgArr[i].key;
  31. if (i === 0) img.classList.add('active');
  32. // 3.添加事件
  33. img.onclick = () => location.href = imgArr[i].url;
  34. // 4.添加图片到片断中
  35. frag.append(img);
  36. }
  37. // 5.添加片段到图片容器
  38. imgs.append(frag);
  39. }
  40. // * 2.创建按钮组
  41. function createBtns(imgs, btns) {
  42. // 1.计算图片数量
  43. const imgNum = imgs.childElementCount;
  44. // 2.创建按钮元素
  45. for (let i = 0; i < imgNum; i++) {
  46. // 1. 生成按钮:span
  47. const btn = document.createElement('span');
  48. // 2. 按钮索引:data-key
  49. btn.dataset.key = imgs.children[i].dataset.key;
  50. // 3. 将第一个按钮设置为激活
  51. if (i === 0) btn.classList.add('active');
  52. // 4. 将按钮组添加到容器中
  53. btns.append(btn);
  54. }
  55. }
  56. // * 3.按钮点击事件
  57. function switchImg(btn, imgs) {
  58. // 1.去掉图片和按钮的激活状态
  59. [...btn.parentNode.children].forEach(btn => btn.classList.remove('active'));
  60. [...imgs.children].forEach(img => img.classList.remove('active'));
  61. // 2. 将当前图片按钮处于激活状态
  62. btn.classList.add('active');
  63. // 3. 根据按钮索引,找到对应的图片
  64. const currimg = [...imgs.children].find((img) => img.dataset.key == btn.dataset.key);
  65. // 4. 将当前图片处于激活状态
  66. currimg.classList.add('active');
  67. }
  68. // * 4.定时器
  69. function timePlay(btnArr, btnKeys) {
  70. // 1. 从索引数组头部取一个
  71. let key = btnKeys.shift();
  72. // 2. 根据索引找到对应的按钮,再给自动派发一个点击事件
  73. btnArr[key].dispatchEvent(new Event('click'));
  74. // 3. 把刚才取出的按钮索引再从尾部进入,实现首位相连
  75. btnKeys.push(key);
  76. }
  77. export { createImgs, createBtns, switchImg, timePlay }

3.css示范

  1. body {
  2. background-color: #eee;
  3. }
  4. .slideshow {
  5. width: 240px;
  6. height: 360px;
  7. }
  8. .slideshow .imgs {
  9. /* 继承父级 */
  10. width: inherit;
  11. height: inherit;
  12. }
  13. .slideshow img {
  14. width: 100%;
  15. height: 100%;
  16. border-radius: 10px;
  17. display: none;
  18. }
  19. /* 设置图片激活状态 */
  20. .slideshow img.active{
  21. display: block;
  22. }
  23. .slideshow img:hover{
  24. cursor: pointer;
  25. }
  26. /* 按钮容器 */
  27. .slideshow .btns {
  28. display: flex;
  29. place-content: center;
  30. /* 向上移动40px,不渲染页面 */
  31. transform: translateY(-40px);
  32. }
  33. .slideshow .btns > span {
  34. background-color: rgba(233, 233, 233, 0.5);
  35. height: 16px;
  36. width: 16px;
  37. border-radius: 50%;
  38. margin: 5px;
  39. }
  40. .slideshow .btns > span.active{
  41. background-color: orangered;
  42. }
  43. .slideshow .btns > span:hover{
  44. cursor: pointer;
  45. }
批改老师:PHPzPHPz

批改状态:合格

老师批语:
本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!
全部评论 文明上网理性发言,请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • 登录PHP中文网,和优秀的人一起学习!
    全站2000+教程免费学