javascript實現(xiàn)移動端輪播圖
本文實例為大家分享了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='http://www.aoyou183.cn/bcjs/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 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 data-ride='carousel'> <!-- 輪播圖部分 --> <div class='lunbo'> <ul class='lul'> <li> <a href='http://www.aoyou183.cn/bcjs/14270.html'> <img src='http://www.aoyou183.cn/bcjs/img/1.png' alt=''> </a> </li> <li > <a href='http://www.aoyou183.cn/bcjs/14270.html'> <img src='http://www.aoyou183.cn/bcjs/img/2.png' alt=''> </a> </li> <li > <a href='http://www.aoyou183.cn/bcjs/14270.html'> <img src='http://www.aoyou183.cn/bcjs/img/3.png' alt=''> </a> </li> </ul> </div></body></html>
js：
<script src='http://www.aoyou183.cn/bcjs/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í)行l(wèi)ul.style.transition=’all 1s’setTimeout(function(){ // 判斷是否到最后一張// 當(dāng)顯示為最后一幢圖片時進(jìn)行操作，最后一張圖片的索引值為licount-1if(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和yvar 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=trueif(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>
效果圖：
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章：
網(wǎng)公網(wǎng)安備