JavaScript实现轮播的方式多种多样，桌面的移动端的实现方式都是大同小异的，具体的核心实现原理不外乎下面几个要点。即：
1. 确定播放方向。一般都是横向轮播，当然不排除纵向的需求可能。当然还有反向播放情况，这个自定义。
2. 对第一张图片的处理。如果当前是第一张了，那么如果继续往前面(就是你播放方向的反向)滑动，那么就会出现留白（如果你允许继续滑动的话，不过不允许滑动也没有啥意思了，除非你想来回轮播，这个我在另一篇用jQuery也说明过），此时应该让你的左边显示应该轮播图片的最后一张，实现无缝连接。
3. 对最后一张图片的处理。跟第一张一样，你需要在继续滑动的时候显示第一张图片，实现无缝连接。
4. 对标记跟随原点的处理。这个需要对原点的排列方式和下标进行严谨的逻辑判断。
我这里是在移动端的一个轮播效果，纯JavaScript原生实现，应该说很接近工作实际了。请诸位爷上眼。
注意：如果您想实现跟我一样的效果，请务必按我的样式和架构来写
HTML部分
<div> <ul> <li><img src="https://www.jb51.net/article/5.jpg" alt=""></li> <li><img src="https://www.jb51.net/article/1.jpg" alt=""></li> <li><img src="https://www.jb51.net/article/2.jpg" alt=""></li> <li><img src="https://www.jb51.net/article/3.jpg" alt=""></li> <li><img src="https://www.jb51.net/article/4.jpg" alt=""></li> <li><img src="https://www.jb51.net/article/5.jpg" alt=""></li> <li><img src="https://www.jb51.net/article/1.jpg" alt=""></li> </ul> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div>
CSS部分
*{ margin: 0;padding: 0; } html,body{ height: 100%;} #box{ width: 100%; overflow: hidden; position: relative; } #box #lilist{ /* 宽度根据子元素个数动态确定 */ /*width: 500%;*/ position: relative; float: left; white-space: nowrap; list-style: none; overflow: hidden; } #box #lilist li{ float: left; height: 200px; } #box #lilist li img{ display: block; width: 100%; height: 100%; object-fit: fill; } #box #items{ position: absolute; list-style: none; width: 30%; bottom: 10px; left: 35%; display: flex; flex-flow: row nowrap; justify-content: space-between; } #box #items li{ float: left; width: 10px; height: 10px; border-radius: 50%; background-color: black; } #box #items .active{ background-color: red; }
重点来啦，JavaScript原生代码：
window.onload = function(){ var totalli1 = document.querySelectorAll("#box>#lilist>li"); var totalli2 = document.querySelectorAll("#box>#items>li"); // 动态改变轮播图宽度 changewidth(); function changewidth(){ var newstyle = document.createElement("style"); var mycss = "#lilist{ width : "+totalli1.length+"00% }"; mycss += "#lilist li{ width : "+(100/totalli1.length)+"% }" newstyle.innerHTML = mycss; document.head.appendChild(newstyle); } var getbox = document.getElementById("box"); var getlist = document.getElementById("lilist"); var startx = 0, endx = 0, disx = 0; var listleft = 0, finalx = 0; var windowx = document.documentElement.offsetWidth; var listx = getlist.offsetWidth; var moveindex = 0; // 自动轮播控制变量 var num = 1, index = 0; // 先让他左滑 transforms(getlist,"translateX",-windowx); getbox.addEventListener("touchstart",function(event){ let touch = event.changedTouches[0]; startx = touch.clientX; // 首位位置判断，并重新定位.鼠标刚放上去就要改变位置，不然move移动再改的话会和移动的transform冲突，也不能在鼠标离开时切换，会影响到移动的滑动效果。这个过程中是瞬间完成的，不允许过渡或动画，显得平滑。 let lastx = Math.round(-transforms(getlist,"translateX")/windowx); if(lastx<1){ lastx = totalli1.length-2; }else if(lastx>totalli1.length-2){ lastx = 1; } // 移动到指定位置 transforms(getlist,"translateX",-lastx*windowx); // 给 listleft 赋值 listleft = transforms(getlist,"translateX"); // 清除过度缓冲 getlist.style.transition = "none"; // 清除计时器 window.clearInterval(timer); }) getbox.addEventListener("touchmove",function(event){ let touch = event.changedTouches[0]; endx = touch.clientX; disx = endx - startx; finalx = disx+listleft; transforms(getlist,"translateX",finalx) }) getbox.addEventListener("touchend",function(event){ let touch = event.changedTouches[0]; // 滑动的屏宽个数。 let lastx = 0; // ul 距屏幕左侧的距离与屏宽的比例 lastx = Math.round(-transforms(getlist,"translateX")/windowx); if(lastx<=0){ lastx = 0; }else if(lastx>totalli1.length-1){ lastx = totalli1.length-1; } transforms(getlist,"translateX",-lastx*windowx); getlist.style.transition = "transform 0.3s"; // 下部红点跟随,获取下标。诸位请注意下面几个数字的含义，4,5,6的意思你们自己思考一下 moveindex = lastx-1; if(lastx==1||lastx==6){ moveindex = 0; }else if(lastx==0||lastx==5){ moveindex = 4; } movecircle(moveindex); // 重新添加计时器，自动轮播 timer = window.setInterval(playself,3000); // 改变num和index的值,以确定计时器开始位置 console.log(moveindex+"。。。"+lastx) index = moveindex; num = lastx; }) // 自动轮播 var timer = window.setInterval(playself,3000); function playself(){ // 清除过渡残留 getlist.style.transition = "none"; if(num==totalli1.length-1){ transforms(getlist,"translateX",-windowx); num = 1; } // 再添加一个一次性计时器即可分开与 interval 的冲突 setTimeout(function(){ transforms(getlist,"translateX",-windowx*(++num)); getlist.style.transition = "transform 0.5s"; // 原点跟随移动 index++; if(index==totalli2.length){ index = 0; totalli2[index].classList.add("active"); } movecircle(index); },1) } // 红点移动函数 function movecircle(getindex){ for(let i=0;i<totalli2.length;i++){ totalli2[i].classList.remove("active"); if(getindex==i){ totalli2[getindex].classList.add("active"); } } } }