JavaScript實(shí)現(xiàn)輪播的方式多種多樣，桌面的移動(dòng)端的實(shí)現(xiàn)方式都是大同小異的，具體的核心實(shí)現(xiàn)原理不外乎下面幾個(gè)要點(diǎn)。即：
創(chuàng)新互聯(lián)公司專注于企業(yè)營銷型網(wǎng)站、網(wǎng)站重做改版、焦作網(wǎng)站定制設(shè)計(jì)、自適應(yīng)品牌網(wǎng)站建設(shè)、HTML5建站、商城網(wǎng)站建設(shè)、集團(tuán)公司官網(wǎng)建設(shè)、成都外貿(mào)網(wǎng)站建設(shè)公司、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁設(shè)計(jì)等建站業(yè)務(wù)，價(jià)格優(yōu)惠性價(jià)比高，為焦作等各大城市提供網(wǎng)站開發(fā)制作服務(wù)。
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部分
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代碼還有一些算法部分的瑕疵，本人愚鈍，目前只能想到這種方式了，有些變量可能會(huì)占用太多內(nèi)存，希望各位僅作參考，如有大神指出問題所在，萬分感謝。最后，誠心感謝有緣人的觀看！祝你生活愉快，工作順利！
總結(jié)
到此這篇關(guān)于JavaScript實(shí)現(xiàn)移動(dòng)端帶transition動(dòng)畫的輪播效果的文章就介紹到這了,更多相關(guān)js transition 輪播內(nèi)容請(qǐng)搜索創(chuàng)新互聯(lián)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持創(chuàng)新互聯(lián)！
