溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇文章給大家分享的是有關如何在移動端利用javascript實現一個輪播圖功能，小編覺得挺實用的，因此分享給大家學習，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。
具體內容如下
<!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 ><div ><p class="sun" >🔆</p> </div><input type="text" > <input type="submit" value="🔍" ></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=""> </a> </li> <li > <a href=""> <img src="img/2.png" alt=""> </a> </li> <li > <a href=""> <img src="img/3.png" alt=""> </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>以上就是如何在移動端利用javascript實現一個輪播圖功能，小編相信有部分知識點可能是我們日常工作會見到或用到的。希望你能通過這篇文章學到更多知識。更多詳情敬請關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
