JavaScript實現輪播的方式多種多樣，桌面的移動端的實現方式都是大同小異的，具體的核心實現原理不外乎下面幾個要點。即：

1. 確定播放方向。一般都是橫向輪播，當然不排除縱向的需求可能。當然還有反向播放情況，這個自定義。2. 對第一張圖片的處理。如果當前是第一張了，那么如果繼續往前面(就是你播放方向的反向)滑動，那么就會出現留白（如果你允許繼續滑動的話，不過不允許滑動也沒有啥意思了，除非你想來回輪播，這個我在另一篇用jQuery也說明過），此時應該讓你的左邊顯示應該輪播圖片的最后一張，實現無縫連接。3. 對最后一張圖片的處理。跟第一張一樣，你需要在繼續滑動的時候顯示第一張圖片，實現無縫連接。4. 對標記跟隨原點的處理。這個需要對原點的排列方式和下標進行嚴謹的邏輯判斷。

我這里是在移動端的一個輪播效果，純JavaScript原生實現，應該說很接近工作實際了。請諸位爺上眼。

注意：如果您想實現跟我一樣的效果，請務必按我的樣式和架構來寫

HTML部分

<div id='box'> <ul id='lilist'> <li><img src='http://www.aoyou183.cn/bcjs/5.jpg' alt=''></li> <li><img src='http://www.aoyou183.cn/bcjs/1.jpg' alt=''></li> <li><img src='http://www.aoyou183.cn/bcjs/2.jpg' alt=''></li> <li><img src='http://www.aoyou183.cn/bcjs/3.jpg' alt=''></li> <li><img src='http://www.aoyou183.cn/bcjs/4.jpg' alt=''></li> <li><img src='http://www.aoyou183.cn/bcjs/5.jpg' alt=''></li> <li><img src='http://www.aoyou183.cn/bcjs/1.jpg' alt=''></li> </ul> <ul id='items'> <li class='active'></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'); } } }}

代碼還有一些算法部分的瑕疵，本人愚鈍，目前只能想到這種方式了，有些變量可能會占用太多內存，希望各位僅作參考，如有大神指出問題所在，萬分感謝。最后，誠心感謝有緣人的觀看！祝你生活愉快，工作順利！

總結

到此這篇關于JavaScript實現移動端帶transition動畫的輪播效果的文章就介紹到這了,更多相關js transition 輪播內容請搜索好吧啦網以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持好吧啦網！