JavaScript實(shí)現(xiàn)輪播的方式多種多樣，桌面的移動(dòng)端的實(shí)現(xiàn)方式都是大同小異的，具體的核心實(shí)現(xiàn)原理不外乎下面幾個(gè)要點(diǎn)。即：

1. 確定播放方向。一般都是橫向輪播，當(dāng)然不排除縱向的需求可能。當(dāng)然還有反向播放情況，這個(gè)自定義。2. 對(duì)第一張圖片的處理。如果當(dāng)前是第一張了，那么如果繼續(xù)往前面(就是你播放方向的反向)滑動(dòng)，那么就會(huì)出現(xiàn)留白（如果你允許繼續(xù)滑動(dòng)的話，不過不允許滑動(dòng)也沒有啥意思了，除非你想來回輪播，這個(gè)我在另一篇用jQuery也說明過），此時(shí)應(yīng)該讓你的左邊顯示應(yīng)該輪播圖片的最后一張，實(shí)現(xiàn)無縫連接。3. 對(duì)最后一張圖片的處理。跟第一張一樣，你需要在繼續(xù)滑動(dòng)的時(shí)候顯示第一張圖片，實(shí)現(xiàn)無縫連接。4. 對(duì)標(biāo)記跟隨原點(diǎn)的處理。這個(gè)需要對(duì)原點(diǎn)的排列方式和下標(biāo)進(jìn)行嚴(yán)謹(jǐn)?shù)倪壿嬇袛唷?/p>

我這里是在移動(dòng)端的一個(gè)輪播效果，純JavaScript原生實(shí)現(xiàn)，應(yīng)該說很接近工作實(shí)際了。請(qǐng)諸位爺上眼。

注意：如果您想實(shí)現(xiàn)跟我一樣的效果，請(qǐng)務(wù)必按我的樣式和架構(gòu)來寫

HTML部分

<div id='box'> <ul id='lilist'> <li><img src='http://www.4tl426be.cn/bcjs/5.jpg' alt=''></li> <li><img src='http://www.4tl426be.cn/bcjs/1.jpg' alt=''></li> <li><img src='http://www.4tl426be.cn/bcjs/2.jpg' alt=''></li> <li><img src='http://www.4tl426be.cn/bcjs/3.jpg' alt=''></li> <li><img src='http://www.4tl426be.cn/bcjs/4.jpg' alt=''></li> <li><img src='http://www.4tl426be.cn/bcjs/5.jpg' alt=''></li> <li><img src='http://www.4tl426be.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{ /* 寬度根據(jù)子元素個(gè)數(shù)動(dòng)態(tài)確定 */ /*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; }

重點(diǎn)來啦，JavaScript原生代碼：

window.onload = function(){var totalli1 = document.querySelectorAll('#box>#lilist>li'); var totalli2 = document.querySelectorAll('#box>#items>li'); // 動(dòng)態(tài)改變輪播圖寬度 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; // 自動(dòng)輪播控制變量 var num = 1, index = 0; // 先讓他左滑 transforms(getlist,'translateX',-windowx); getbox.addEventListener('touchstart',function(event){ let touch = event.changedTouches[0]; startx = touch.clientX; // 首位位置判斷，并重新定位.鼠標(biāo)剛放上去就要改變位置，不然move移動(dòng)再改的話會(huì)和移動(dòng)的transform沖突，也不能在鼠標(biāo)離開時(shí)切換，會(huì)影響到移動(dòng)的滑動(dòng)效果。這個(gè)過程中是瞬間完成的，不允許過渡或動(dòng)畫，顯得平滑。 let lastx = Math.round(-transforms(getlist,'translateX')/windowx); if(lastx<1){ lastx = totalli1.length-2; }else if(lastx>totalli1.length-2){ lastx = 1; } // 移動(dòng)到指定位置 transforms(getlist,'translateX',-lastx*windowx); // 給 listleft 賦值 listleft = transforms(getlist,'translateX'); // 清除過度緩沖 getlist.style.transition = 'none'; // 清除計(jì)時(shí)器 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]; // 滑動(dòng)的屏寬個(gè)數(shù)。 let lastx = 0; // ul 距屏幕左側(cè)的距離與屏寬的比例 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'; // 下部紅點(diǎn)跟隨,獲取下標(biāo)。諸位請(qǐng)注意下面幾個(gè)數(shù)字的含義，4,5,6的意思你們自己思考一下 moveindex = lastx-1; if(lastx==1||lastx==6){ moveindex = 0; }else if(lastx==0||lastx==5){ moveindex = 4; } movecircle(moveindex); // 重新添加計(jì)時(shí)器，自動(dòng)輪播 timer = window.setInterval(playself,3000); // 改變num和index的值,以確定計(jì)時(shí)器開始位置 console.log(moveindex+'。。。'+lastx) index = moveindex; num = lastx; }) // 自動(dòng)輪播 var timer = window.setInterval(playself,3000); function playself(){ // 清除過渡殘留 getlist.style.transition = 'none'; if(num==totalli1.length-1){ transforms(getlist,'translateX',-windowx); num = 1; } // 再添加一個(gè)一次性計(jì)時(shí)器即可分開與 interval 的沖突 setTimeout(function(){ transforms(getlist,'translateX',-windowx*(++num)); getlist.style.transition = 'transform 0.5s'; // 原點(diǎn)跟隨移動(dòng) index++; if(index==totalli2.length){ index = 0; totalli2[index].classList.add('active'); } movecircle(index); },1) } // 紅點(diǎn)移動(dòng)函數(shù) function movecircle(getindex){ for(let i=0;i<totalli2.length;i++){ totalli2[i].classList.remove('active'); if(getindex==i){ totalli2[getindex].classList.add('active'); } } }}

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

總結(jié)

到此這篇關(guān)于JavaScript實(shí)現(xiàn)移動(dòng)端帶transition動(dòng)畫的輪播效果的文章就介紹到這了,更多相關(guān)js transition 輪播內(nèi)容請(qǐng)搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)！