快捷導(dǎo)航

javascript實(shí)現(xiàn)移動(dòng)端輪播圖

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

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

本文實(shí)例為大家分享了js實(shí)現(xiàn)移動(dòng)端輪播圖的具體代碼，供大家參考，具體內(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>
 <!-- 頁(yè)頭 -->
 <button class="open">打開(kāi)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è)置動(dòng)態(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ù)制一個(gè)元素
// appendChild() 方法可向節(jié)點(diǎn)的子節(jié)點(diǎn)列表的末尾添加新的子節(jié)點(diǎn)，再最后一張圖片后面添加第一張圖片
 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è)置每一個(gè)li元素的樣式 給他們定義寬度 他的寬度就等于我們頁(yè)面的寬度也就是lunbo的寬度
for(i=0;i<lis.length;i++){
 lis[i].style.width=lwidth+'px'
}
//設(shè)置偏移距離
lul.style.left=-lwidth+'px'

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

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

setTimeout(function(){
 // 判斷是否到最后一張
// 當(dāng)顯示為最后一幢圖片時(shí)進(jìn)行操作，最后一張圖片的索引值為licount-1
if(index==licount-1){
 index=1;
// 偏移到最開(kāi)始的位置
lul.style.left=(-index*lwidth)+'px'
//當(dāng)顯示最后一張的時(shí)候會(huì)移回去，所以要清除過(guò)度效果
lul.style.transition='none'}
//如果直接清除過(guò)度效果的話最后一張就直接跳過(guò)去了，所以讓他延遲一會(huì)在進(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'
 // 為了使過(guò)度效果流暢 去除lul的過(guò)渡效果
 lul.style.transition='none'
 }
 
})
lul.addEventListener('touchend',function(){
 con=false;
 // 判斷是否切換圖片
 if(Math.abs(dis)>100){//切換圖片 如果手指觸摸滑動(dòng)的距離超過(guò)100進(jìn)行圖片切換
 if(dis>0){//如果偏移值為正數(shù)則向下一張偏移（向右滑動(dòng)）
 index--
 }
 else{//如果偏移值為負(fù)數(shù)則向下一張偏移（向左滑動(dòng)）
 index++
 }
 //設(shè)置輪播圖的最終偏移，添加過(guò)度
 lul.style.left=-index*lwidth+'px';
 lul.style.transition='all 0.5s'
 }
 else if(Math.abs(dis)>0 ){//確定用戶做出拖拽事件，點(diǎn)一下的話不需要做出相關(guān)操作
 //設(shè)置輪播圖回彈，添加過(guò)度效果
 lul.style.left=-index*lwidth+'px';
 lul.style.transition='all 0.5s'
 }
//執(zhí)行完觸摸事件就可以從新開(kāi)啟定時(shí)器了
sx=0;
mx=0;
dis=0;
ltime()

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

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

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

 })
 
</script>

效果圖：