快捷導(dǎo)航

javascript實現(xiàn)移動端輪播圖

更新時間：2020年12月09日 15:44:02 作者：我要學(xué)web

這篇文章主要為大家詳細(xì)介紹了javascript實現(xiàn)移動端輪播圖，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了js實現(xiàn)移動端輪播圖的具體代碼，供大家參考，具體內(nèi)容如下

<!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="">
  </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>
 //設(shè)置動態(tài)的css樣式
 
 var lunbo =document.querySelector('.lunbo') 
 var lul=document.querySelector('.lul')
 var fimg =document.querySelectorAll('li')[0];
 var limg =document.querySelectorAll('li')[2];
// cloneNode復(fù)制一個元素
// appendChild() 方法可向節(jié)點的子節(jié)點列表的末尾添加新的子節(jié)點，再最后一張圖片后面添加第一張圖片
 lul.appendChild(fimg.cloneNode(true))
//在第一張圖片前面添加最后一張圖片 
lul.insertBefore(limg.cloneNode(true),lul.firstChild)
// 獲取lul下面全部的li
 var lis= lul.querySelectorAll('li')
 
// 獲取li元素的數(shù)量
var licount = lis.length;
// 獲取輪播圖總共的寬度
var lwidth = lunbo.offsetWidth;
// 設(shè)置圖片盒子的寬度
lul.style.width=licount*lwidth+'px';
//設(shè)置每一個li元素的樣式 給他們定義寬度 他的寬度就等于我們頁面的寬度也就是lunbo的寬度
for(i=0;i<lis.length;i++){
 lis[i].style.width=lwidth+'px'
}
//設(shè)置偏移距離
lul.style.left=-lwidth+'px'

// 設(shè)置自動輪播
// 設(shè)置索引(設(shè)置索引為1，因為圖片已經(jīng)偏移了)
var index=1
// 設(shè)置定時器先去封裝他，因為后面要開啟定時器，調(diào)用這個函數(shù)就行了
var time;//要在外面定義time不然后面清除定時器接收不到函數(shù)
//當(dāng)手指滑動輪播圖過快的時候后面的輪播圖就不會顯示，因為滑動過快時過度沒有完成就不會觸發(fā)webkitTransitionEnd（監(jiān)聽當(dāng)元素執(zhí)行完過度效果）
//所以設(shè)置一個變量用來控制，（過度效果未完成不能滑動圖片）
var con=true
 var ltime=function(){
 time=setInterval(function(){
index++
// 設(shè)置偏移 每次偏移都是以最初的點為參照點點的，所以如果每次都便宜一個width的話圖片就不動
lul.style.left=(-index*lwidth)+'px'

// 添加過度效果,在最后一張?zhí)降谝粡垥r要清除過度效果所以要加上如果在清除過度后面添加else{ lul.style.transition='all 1s'}的話因為有個定時器所以不能流暢執(zhí)行
lul.style.transition='all 1s'

setTimeout(function(){
 // 判斷是否到最后一張
// 當(dāng)顯示為最后一幢圖片時進(jìn)行操作，最后一張圖片的索引值為licount-1
if(index==licount-1){
 index=1;
// 偏移到最開始的位置
lul.style.left=(-index*lwidth)+'px'
//當(dāng)顯示最后一張的時候會移回去，所以要清除過度效果
lul.style.transition='none'}
//如果直接清除過度效果的話最后一張就直接跳過去了，所以讓他延遲一會在進(jìn)行判斷（跳轉(zhuǎn)），這就是為什么在最后一張后面要添加第一張圖片了 



},1000)

},2000)
 }
ltime();
//設(shè)置觸摸事件
// 定義手指的坐標(biāo) 分為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進(jìn)行圖片切換
 if(dis>0){//如果偏移值為正數(shù)則向下一張偏移（向右滑動）
 index--
 }
 else{//如果偏移值為負(fù)數(shù)則向下一張偏移（向左滑動）
 index++
 }
 //設(shè)置輪播圖的最終偏移，添加過度
 lul.style.left=-index*lwidth+'px';
 lul.style.transition='all 0.5s'
 }
 else if(Math.abs(dis)>0 ){//確定用戶做出拖拽事件，點一下的話不需要做出相關(guān)操作
 //設(shè)置輪播圖回彈，添加過度效果
 lul.style.left=-index*lwidth+'px';
 lul.style.transition='all 0.5s'
 }
//執(zhí)行完觸摸事件就可以從新開啟定時器了
sx=0;
mx=0;
dis=0;
ltime()

})
//解決輪播圖劃到第一張或者最后一張時沒有圖片
//添加 webkitTransitionEnd 事件，webkitTransitionEnd事件是監(jiān)聽當(dāng)元素執(zhí)行完過度效果

 lul.addEventListener('webkitTransitionEnd',function(){
con=true

if(index==licount-1){//當(dāng)滑動到最后一個圖片時展示的是倒數(shù)第二張圖片讓圖片展示的為第一張
 index=1;//index時從0開始的
 lul.style.left=-index*lwidth+'px';
 lul.style.transition='none'
 
}
else if(index==0){//當(dāng)展示的時最后一張圖片時，就是第一個位置的圖片向前滑動時讓他展示最后一張圖片
 index=licount-2;
 lul.style.left=-index*lwidth+'px';
 lul.style.transition='none'
 
 
}

 })
 
</script>

效果圖：