当前位置：Gxlcms > css > flex布局实现网易云播放器界面的布局

flex布局实现网易云播放器界面的布局

时间：2021-07-01 10:21:17 帮助过：42人阅读

这篇文章给大家介绍的内容是关于flex布局实现网易云播放器界面的布局，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

今天我们就深入项目的细节，说说每一个切图人员绕不过去的坎儿，也是jser必须要面对的一个常规任务--《网易云音乐高复用的响应式轮播图的实现》

轮播图相对于大家的工作，就和你首次去女朋友家的准备工作一样，重要而且绕不过去。遗憾的是，大部分人写轮播图都跟第一次见家长一样，没什么经验。

很多人想自己写一套轮播图，然后以后工作中不断的完善，最后形成自己的插件库，遗憾的是有这个想法的大部分人，到了行动的时候才发现，想要实现它，比兑现“结婚就买套房”的诺言都难。最后只好迫于项目压力和自身技能水平，变成了插件的搬运工。

可是插件搬运工有三个问题，首先这个东西对一个人的技术成长没什么用，其次也是重点，插件并不能完全符合项目需求，自己又没有能力进行二次开发，遇上诡异bug也只能听天由命，继续踏上寻找更合适的插件的慢慢征途。最后，有些插件很重，很臃肿，但你只需要的是最基础的轮播功能而已。你会为了吃上一碟醋，专门包顿饺子吗？我想不会。那你为什么仅仅为了使用一个轮播图会而项目里面使用几百k甚至上M的插件？

很多人可能会说因为不会写，好，今天我们就来实现一个，你会发现原来js的世界如此的简单和美好，有找插件的功夫，你都能开发出8个插件了。

1331009329-5b6af0a614137_articlex.png

往上看，大家都认的啥叫轮播图，仔细看下你第一步要做的至少说我拖着一个东西得能动，哪怕是一个红色方块呗。这里就得说下拖拽，拖拽改变的无非就是left和top值（外星人才改right和bottom，我们地球人一般都用left和top，别问我为什么）,先让他在一个方向上动起来。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>Document</title>
  8.     <style>
  9.         #p1 {
  10.             width: 100px;
  11.             height: 100px;
  12.             position: absolute;
  13.             left: 50px;
  14.             top: 50px;
  15.             background: red;
  16.         }
  17.     </style>
  18.     <script>
  19.         document.addEventListener("DOMContentLoaded", function () {
  20.             var op = document.getElementById('p1');
  21.             var disX = 0;
  22.             op.addEventListener("touchstart", function (e) {
  23.                 var startPoint = e.changedTouches[0].pageX;
  24.                 var startLeft = op.offsetLeft;
  25.                 disX = startPoint - startLeft;
  26.             });
  27.             op.addEventListener("touchmove", doMove,false);
  28.             function doMove(e) {
  29.                 var currPoint = e.changedTouches[0].pageX;
  30.                 var newLeft  = currPoint - disX;
  31.                 op.style.left = newLeft +'px';
  32.             }
  33.             function doUp(e) {
  34.                 var currPoint = e.changedTouches[0].pageX;
  35.                 var newLeft  = currPoint - disX;
  36.                 op.style.left = newLeft +'px';
  37.                 op.removeEventListener("touchmove", doUp,false);
  38.                 op.removeEventListener("touchend", doUp,false);
  39.             }
  40.             op.addEventListener("touchend", doUp,false);
  41.         }, false);
  42.     </script>
  43. </head>
  44. <body>
  45.     <p id="p1"></p>
  46. </body>
  47. </html>

仔细看，无非就是用了移动端事件而已，分分钟就能理解，问题是很多同学会说，老师，我不理解这里，这是啥，

  1.  var currPoint = e.changedTouches[0].pageX;
  2.  var newLeft  = currPoint - disX;
  3.  op.style.left = newLeft +'px';

这个又是啥？

  1. var currPoint = e.changedTouches[0].pageX;
  2. var newLeft  = currPoint - disX;
  3. op.style.left = newLeft +'px';
  4. op.addEventListener("touchmove", doUp,false);
  5. op.addEventListener("touchend", doUp,false);

其实这些就是核心内容，简单的说就是一张图，非常简单的图，你一看就能懂。

1644406855-5b6af0b872dee_articlex.png

其实就是算蓝线的距离只要蓝线正确，位置就错不了，真要是理解不了也没事，你就把他当成公式记住一点毛病也没有。有了这些基础知识就好办了，搭个架子，

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  6.     <style>
  7.         * {
  8.             margin: 0;
  9.             padding: 0;
  10.         }
  11.         li {
  12.             list-style: none;
  13.         }
  14.         .swiper-container {
  15.             width: 320px;
  16.             height: 130px;
  17.             position: relative;
  18.             margin: 20px auto;
  19.             overflow: hidden;
  20.         }
  21.         .swiper-container .swiper-wrapper {
  22.             width: 2240px;
  23.             height: 130px;
  24.             position: absolute;
  25.             left: 0px;
  26.         }
  27.         .swiper-container .swiper-wrapper img {
  28.             width: 320px;
  29.             height: 130px;
  30.             float: left;
  31.             display: block;
  32.         }
  33.         .swiper-container ul {
  34.             width: 35px;
  35.             height: 4px;
  36.             position: absolute;
  37.             bottom: 10px;
  38.             left: 50%;
  39.             margin-left: -15px;
  40.         }
  41.         .swiper-container ul li {
  42.             width: 4px;
  43.             height: 4px;
  44.             border-radius: 2px;
  45.             border: 0.25px solid #fff;
  46.             margin-left: 2.5px;
  47.             background: #666;
  48.             float: left;
  49.             cursor: pointer;
  50.         }
  51.         .swiper-container ul .active {
  52.             background: #fff;
  53.         }
  54.         .swiper-container ul li:hover {
  55.             background: #fff;
  56.         }
  57.     </style>
  58. </head>
  59. <body>
  60.     <p class="swiper-container">
  61.         <p class="swiper-wrapper">
  62.             <img src="images/4.jpg">
  63.             <img src="images/0.jpg">
  64.             <img src="images/1.jpg">
  65.             <img src="images/2.jpg">
  66.             <img src="images/3.jpg">
  67.             <img src="images/4.jpg">
  68.             <img src="images/0.jpg">
  69.         </p>
  70.         <ul>
  71.             <li class="active"></li>
  72.             <li></li>
  73.             <li></li>
  74.             <li></li>
  75.             <li></li>
  76.         </ul>
  77.     </p>
  78.     <script>
  79.         document.addEventListener("DOMContentLoaded", function () {
  80.             var oSWiperContainer = document.querySelector(".swiper-container");
  81.             var oSWiperWrapper = document.querySelector(".swiper-container .swiper-wrapper");
  82.             var aImg = document.querySelectorAll(".swiper-container .swiper-wrapper img")
  83.             var aLi = document.querySelectorAll(".swiper-container ul li");
  84.             oSWiperContainer.addEventListener("touchstart", function (e) {
  85.                 var disX = 0;
  86.                 var startPoint = e.changedTouches[0].pageX;
  87.                 var startLeft = oSWiperWrapper.getBoundingClientRect().left;
  88.                 disX = startPoint - startLeft;
  89.                 oSWiperContainer.addEventListener("touchmove", doMove, false);
  90.                 oSWiperContainer.addEventListener("touchend", doUp, false);
  91.                 
  92.                 function doMove(e) {
  93.                     var currPoint = e.changedTouches[0].pageX;
  94.                     var newLeft = currPoint - disX;
  95.                     oSWiperWrapper.style.left = newLeft + 'px';
  96.                 }
  97.                 function doUp(e) {
  98.                     oSWiperContainer.removeEventListener("touchmove", doUp, false);
  99.                     oSWiperContainer.removeEventListener("touchend", doUp, false);
  100.                 }
  101.             }, false);
  102.         }, false);
  103.     </script>
  104. </body>
  105. </html>

至少现在一拖拽走起来了，这里简单吧，连纵向都不用考虑，轮播比拖拽还简单，只考虑水平方向，

问题是松手了以后，轮播图的，每一项没去正确的位置，啥叫正确的位置，其实每次改变的left的值将好是一个轮播图的宽度，上图。

411980114-5b6af0cc7912d_articlex.png

你先别管别的，看红框就是手机屏幕宽度，每次其实就是移动一个格子。那我只要定一个iNow值记录移动几个格子，只要iNow正确就一切OK了呗，说干就干。

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  6.     <style>
  7.         * {
  8.             margin: 0;
  9.             padding: 0;
  10.         }
  11.         li {
  12.             list-style: none;
  13.         }
  14.         .swiper-container {
  15.             width: 320px;
  16.             height: 130px;
  17.             position: relative;
  18.             margin: 20px auto;
  19.             overflow: hidden;
  20.         }
  21.         .swiper-container .swiper-wrapper {
  22.             width: 2240px;
  23.             height: 130px;
  24.             position: absolute;
  25.             left: 0px;
  26.             transition: .3s all ease;
  27.         }
  28.         .swiper-container .swiper-wrapper img {
  29.             width: 320px;
  30.             height: 130px;
  31.             float: left;
  32.             display: block;
  33.         }
  34.         .swiper-container ul {
  35.             width: 35px;
  36.             height: 4px;
  37.             position: absolute;
  38.             bottom: 10px;
  39.             left: 50%;
  40.             margin-left: -15px;
  41.         }
  42.         .swiper-container ul li {
  43.             width: 4px;
  44.             height: 4px;
  45.             border-radius: 2px;
  46.             border: 0.25px solid #fff;
  47.             margin-left: 2.5px;
  48.             background: #666;
  49.             float: left;
  50.             cursor: pointer;
  51.         }
  52.         .swiper-container ul .active {
  53.             background: #fff;
  54.         }
  55.         .swiper-container ul li:hover {
  56.             background: #fff;
  57.         }
  58.     </style>
  59. </head>
  60. <body>
  61.     <p class="swiper-container">
  62.         <p class="swiper-wrapper">
  63.             <img src="images/1.jpg">
  64.             <img src="images/2.jpg">
  65.             <img src="images/3.jpg">
  66.             <img src="images/4.jpg">
  67.         </p>
  68.         <ul>
  69.             <li class="active"></li>
  70.             <li></li>
  71.             <li></li>
  72.             <li></li>
  73.             <li></li>
  74.         </ul>
  75.     </p>
  76.     <script>
  77.         document.addEventListener("DOMContentLoaded", function () {
  78.             var oSWiperContainer = document.querySelector(".swiper-container");
  79.             var oSWiperWrapper = document.querySelector(".swiper-container .swiper-wrapper");
  80.             var aImg = document.querySelectorAll(".swiper-container .swiper-wrapper img")
  81.             var aLi = document.querySelectorAll(".swiper-container ul li");
  82.             var iNow = 0;
  83.             var oW = aImg[0].offsetWidth;
  84.             oSWiperContainer.addEventListener("touchstart", function (e) {
  85.                 var disX = 0;
  86.                 var startPoint = e.changedTouches[0].pageX;
  87.                 var startLeft = oSWiperWrapper.getBoundingClientRect().left;
  88.                 disX = startPoint - startLeft;
  89.                 oSWiperContainer.addEventListener("touchmove", doMove, false);
  90.                 oSWiperContainer.addEventListener("touchend", doUp, false);
  91.                 
  92.                 function doMove(e) {
  93.                     var currPoint = e.changedTouches[0].pageX;
  94.                     var newLeft = currPoint - disX;
  95.                     oSWiperWrapper.style.left = newLeft+'px';
  96.                 }
  97.                 function doUp(e) {
  98.                     var endPoint = e.changedTouches[0].pageX;
  99.                     
  100.                     if(endPoint-startPoint>50){
  101.                         iNow--;
  102.                         if(iNow==-1){
  103.                             iNow = 0;
  104.                         }
  105.                         oSWiperWrapper.style.left = -iNow*oW+'px';
  106.                     }
  107.                     if(endPoint-startPoint<-50){
  108.                         iNow++;
  109.                         if(iNow==aImg.length){
  110.                             iNow = aImg.length -1;
  111.                         }
  112.                         oSWiperWrapper.style.left = -iNow*oW+'px';
  113.                     }
  114.                     oSWiperContainer.removeEventListener("touchmove", doMove, false);
  115.                     oSWiperContainer.removeEventListener("touchend", doUp, false);
  116.                 }
  117.             }, false);
  118.         }, false);
  119.     </script>
  120. </body>
  121. </html>

强调一点，getBoundingClientRect()，这里我为什么没用offsetLeft呢？因为实际项目里面不可能轮播图的外层什么都不套，或者说万一有margin、padding，轮播图的距离就不对了，使用offsetLeft是不具有项目的实用性的，做演示还行，实际项目那么写就废了。

最后我说一个无限轮播图，其实就是算数字的，!411980114-5b6af0cc7912d_articlex.png

)所谓无限轮播的原理，就是当iNow 等于最右边的0的时候，拉回到红框位置，左侧是当iNow 等于 最左边的4的时候，iNow等于6.

很多人有了源代码就忽略了基础的学习，直接拿过去用了，那跟直接找插件没区别，所以这个就当一个小练习吧。

四个练习：

1.实现多屏幕相应适配

2.实现无线轮播

3.实现如果滑动距离不超过50px就不播下一张

4.实现定时器自动轮播!

3579374532-5b6af0f35d5e7_articlex.png

这里我把上面四个练习解决方法的左侧代码放出来作为提示，大家尽量学会实现。

相关文章推荐：

flex布局详解

利用flex布局来column分布的方法

CSS3 flex布局应用介绍_html/css_WEB-ITnose

以上就是flex布局实现网易云播放器界面的布局的详细内容，更多请关注Gxl网其它相关文章！

人气教程排行

本站所有资源全部来源于网络，若本站发布的内容侵害到您的隐私或者利益，请联系我们删除！