javascript實現移動端輪播圖
阿新 • • 發佈：2020-12-11
本文例項為大家分享了js實現移動端輪播圖的具體程式碼，供大家參考，具體內容如下
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="yidong.css" > </head> <body> <!-- 頁頭 --> <button class="open">開啟app</button> <div style="display: flex; justify-content: center; background-color: rgb(28,151,141);width: 100%; height: 0.8rem;"><div style="display:inline-block; font-size: 0.4rem;"><p class="sun" style="font-size: 0.55rem;">🔆</p> </div><input type="text" style="width: 70%;background-color: rgb(190,217,219); font-size: 0.4rem;color: rgb(81,82,81);"> <input type="submit" value="🔍" style="width: 10%;font-size: 0.5rem;"></div> <div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> <!-- 輪播圖部分 --> <div class="lunbo"> <ul class="lul"> <li> <a href=""> <img src="img/1.png" alt="javascript實現移動端輪播圖"> </a> </li> <li > <a href=""> <img src="img/2.png" alt="javascript實現移動端輪播圖"> </a> </li> <li > <a href=""> <img src="img/3.png" alt="javascript實現移動端輪播圖"> </a> </li> </ul> </div> </body> </html>
js：
<script src="rem.js"></script>
<script>
//設定動態的css樣式
var lunbo =document.querySelector('.lunbo')
var lul=document.querySelector('.lul')
var fimg =document.querySelectorAll('li')[0];
var limg =document.querySelectorAll('li')[2];
// cloneNode複製一個元素
// appendChild() 方法可向節點的子節點列表的末尾新增新的子節點，再最後一張圖片後面新增第一張圖片
lul.appendChild(fimg.cloneNode(true))
//在第一張圖片前面新增最後一張圖片
lul.insertBefore(limg.cloneNode(true),lul.firstChild)
// 獲取lul下面全部的li
var lis= lul.querySelectorAll('li')
// 獲取li元素的數量
var licount = lis.length;
// 獲取輪播圖總共的寬度
var lwidth = lunbo.offsetWidth;
// 設定圖片盒子的寬度
lul.style.width=licount*lwidth+'px';
//設定每一個li元素的樣式 給他們定義寬度 他的寬度就等於我們頁面的寬度也就是lunbo的寬度
for(i=0;i<lis.length;i++){
lis[i].style.width=lwidth+'px'
}
//設定偏移距離
lul.style.left=-lwidth+'px'
// 設定自動輪播
// 設定索引(設定索引為1，因為圖片已經偏移了)
var index=1
// 設定定時器先去封裝他，因為後面要開啟定時器，呼叫這個函式就行了
var time;//要在外面定義time不然後面清除定時器接收不到函式
//當手指滑動輪播圖過快的時候後面的輪播圖就不會顯示，因為滑動過快時過度沒有完成就不會觸發webkitTransitionEnd（監聽當元素執行完過度效果）
//所以設定一個變數用來控制，（過度效果未完成不能滑動圖片）
var con=true
var ltime=function(){
time=setInterval(function(){
index++
// 設定偏移 每次偏移都是以最初的點為參照點點的，所以如果每次都便宜一個width的話圖片就不動
lul.style.left=(-index*lwidth)+'px'
// 新增過度效果,在最後一張跳到第一張時要清除過度效果所以要加上如果在清除過度後面新增else{ lul.style.transition='all 1s'}的話因為有個定時器所以不能流暢執行
lul.style.transition='all 1s'
setTimeout(function(){
// 判斷是否到最後一張
// 當顯示為最後一幢圖片時進行操作，最後一張圖片的索引值為licount-1
if(index==licount-1){
index=1;
// 偏移到最開始的位置
lul.style.left=(-index*lwidth)+'px'
//當顯示最後一張的時候會移回去，所以要清除過度效果
lul.style.transition='none'}
//如果直接清除過度效果的話最後一張就直接跳過去了，所以讓他延遲一會在進行判斷（跳轉），這就是為什麼在最後一張後面要新增第一張圖片了
},1000)
},2000)
}
ltime();
//設定觸控事件
// 定義手指的座標 分為x和y
var sx,sy,mx,my,dis;
lul.addEventListener('touchstart',function(q){
clearInterval(time);
sx=q.targetTouches[0].clientX;
})
lul.addEventListener('touchmove',function(q){
if(con==true){
mx=q.targetTouches[0].clientX;
dis=mx-sx;
lul.style.left=-index*lwidth+dis+'px'
// 為了使過度效果流暢 去除lul的過渡效果
lul.style.transition='none'
}
})
lul.addEventListener('touchend',function(){
con=false;
// 判斷是否切換圖片
if(Math.abs(dis)>100){//切換圖片 如果手指觸控滑動的距離超過100進行圖片切換
if(dis>0){//如果偏移值為正數則向下一張偏移（向右滑動）
index--
}
else{//如果偏移值為負數則向下一張偏移（向左滑動）
index++
}
//設定輪播圖的最終偏移，新增過度
lul.style.left=-index*lwidth+'px';
lul.style.transition='all 0.5s'
}
else if(Math.abs(dis)>0 ){//確定使用者做出拖拽事件，點一下的話不需要做出相關操作
//設定輪播圖回彈，新增過度效果
lul.style.left=-index*lwidth+'px';
lul.style.transition='all 0.5s'
}
//執行完觸控事件就可以從新開啟定時器了
sx=0;
mx=0;
dis=0;
ltime()
})
//解決輪播圖劃到第一張或者最後一張時沒有圖片
//新增 webkitTransitionEnd 事件，webkitTransitionEnd事件是監聽當元素執行完過度效果
lul.addEventListener('webkitTransitionEnd',function(){
con=true
if(index==licount-1){//當滑動到最後一個圖片時展示的是倒數第二張圖片讓圖片展示的為第一張
index=1;//index時從0開始的
lul.style.left=-index*lwidth+'px';
lul.style.transition='none'
}
else if(index==0){//當展示的時最後一張圖片時，就是第一個位置的圖片向前滑動時讓他展示最後一張圖片
index=licount-2;
lul.style.left=-index*lwidth+'px';
lul.style.transition='none'
}
})
</script>效果圖：
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。