通常写轮播图结构是这样的
外层box设定宽高，内部多出来的就隐藏，
那个时候我就在想如果内部图片很多no-wrap层就要设定的很宽这还是知道图片大概有多少的情况
要是动态加载的话不是要动态的计算内部的no-wrap层并设定宽度吗？？需要这么麻烦吗？
显然是不需要的，无论多少动态加入多少图片都是相同的道理，有时候你可以充分的利用CSS
而不是总考虑js怎么写，这就是CSS的魅力；
利用white-space:nowrap 就可以保证图片不在换行，其它的就是时利用CSSposition定位或者transform: translateX
移动no-wrap层，原理就是这样，这里只是提供个思路，相信在github上一搜索一大把，不多描述
移动no-wrap层，原理就是这样，这里只是提供个思路，相信在github上一搜索一大把，不多描述
下面的demo可以看看
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> .box{ border: 1px solid red; height: 150px; width: 300px; /* overflow: hidden; */ /* position: relative; */ } .no-warp{ border: 1px solid yellow; white-space:nowrap; transform: translateX(10px); /* position:absolute; */ /* left: 0px; */ } </style> </head> <body> <div class="box"> <div class="no-warp"> <img src="" alt=""> </div> </div> <script> var wrap = document.getElementsByClassName("no-warp")[0]; for(let i=0;i<10;i++){ var imgObj = new Image(300,150); imgObj.src = "./image/1.png"; wrap.appendChild(imgObj); } </script> </body> </html>